This is simplest way to validate any HTML forms ,validation means if user does not type username he will not allowed to access next page.We will make two HTML pages ,one is validate.html which will be check the constrains and second will be where user will be redirected after filling the form.
Here is the code for validate.html
<html>
<head>
<title>Validation</title>
<script type="text/javascript">
function validate(){
var a=document.forms["f1"]["user"].value;
var b=document.forms["f1"]["pass"].value;
if(a==null || a==""){
alert("enter the username");
return false;
}
if(b==null || b==""){
alert("enter the password");
return false;
}
}
</script>
</head>
<body>
<form name="f1" action="welcome.html" method="post" onsubmit="return validate()">
Name:<br /><input name="user" type="text" /><br />
password:<br /><input name="pass" type="password" /><br />
<input type="submit" value="login" />
</body>
</html>
now this is for welcome.html
<html>
<head>
<title>Welcome to new page</title>
</head>
<body>
<h1>welcome user</h1>
</body>
</html>Explaining the codes:
i used javascript for validation, so used <script> tags, first we will create a function validate(), in the function we will take two variables for two fields i.e. name and password. These variables will hold the value of the text field by document.forms["formname"]["textfieldname"].value if the value is empty or null then the alert box will pop else user will redirected to welcome.html.I have uploaded these two file for demo.
CLICK HERE FOR DEMO
No comments:
Post a Comment