FORM VALIDATION PROGRAM
AIM
To
implement a HTML form and validate the form using JavaScript.
PROCEDURE
Step1: Open the file (htmlFormValidation.html)
with any Web Browser (Eg. Firefox)
Step2: Enter Username in the TextBox1
Step3: Enter Email in the TextBox2
Step4: Enter Password in the TextBox3
Step5: Confirm Password in the TextBox4
Step6: Enter First Name in the TextBox5
Step7: Enter Last Name in the TextBox6
Step8: Enter Phone in the TextBox7
Step9: Press Submit button.
Step10: JavaScript will validate if the
input for any field does not match with the contion.
Step11: JavaScript will give alert
message if the form is filled with wrong input
(Example: Mobile Number: abcdefgh)
Step12: If there is no error then the
input is correct.
Step13: Close the web browser. Exit.
Program
Source Code: htmlFormValidation.html
<head>
<script type="text/javascript">
function validation_for_signup(){
var check_email =
/^[\w\.]+@[a-zA-Z_]+?\.[a-zA-Z\.]{2,6}$/;
var check_username = /^[a-zA-Z0-9_]{3,16}$/;
var check_name = /^[a-zA-Z]{3,16}$/;
var check_phone = /^[0-9]{3,16}$/;
if(document.signup.username.value=="")
{
alert("please
enter username");
document.signup.username.focus();
return
false;
}
else if(check_username.test(document.signup.username.value)
== false)
{
alert('Invalid username');
document.signup.username.focus();
return
false;
}
if(document.signup.email.value=="")
{
alert("please
enter email");
document.signup.email.focus();
return
false;
}
else
if(check_email.test(document.signup.email.value) == false)
{
alert('Invalid email');
document.signup.email.focus();
return
false;
}
if(document.signup.password.value==''){
alert("Please
enter Password.");
document.signup.password.focus();
return
false;
}
else
if(document.signup.password.value.length<6)
{
alert("Password
is too short.");
document.signup.password.focus();
return
false;
}
if(document.signup.passconf.value=='')
{
alert("Please
confirm Password.");
document.signup.passconf.focus();
return
false;
}
else
if(document.signup.password.value!=document.signup.passconf.value)
{
alert("Password
does not match.");
document.signup.password.focus();
return
false;
}
if(document.signup.firstname.value=="")
{
alert("please
enter firstname");
document.signup.firstname.focus();
return
false;
}
else
if(check_name.test(document.signup.firstname.value) == false)
{
alert('Invalid firstname');
document.signup.firstname.focus();
return
false;
}
if(document.signup.lastname.value=="")
{
alert("please
enter lastname");
document.signup.lastname.focus();
return
false;
}
else
if(check_name.test(document.signup.lastname.value) == false)
{
alert('Invalid lastname');
document.signup.lastname.focus();
return
false;
}
if(document.signup.phone.value=="")
{
alert("please
enter phone");
document.signup.phone.focus();
return
false;
}
else
if(check_phone.test(document.signup.phone.value) == false)
{
alert('Invalid phone');
document.signup.phone.focus();
return
false;
}
}
</script>
</head>
<body>
<form name="signup" action=""
onSubmit="return validation_for_signup()" method="post">
<ul>
<li>
<p>Username:</p>
<p><input type="text" name="username"
value="" size="50" /></p></li>
<li>
<p>Email:</p>
<p><input type="text"
name="email"
value="" size="50" /></p></li>
<li><p>Password:</p>
<p><input type="password"
name="password"
value="" size="50" /></p></li>
<li>
<p>Password Confirm:</p>
<p><input type="password"
name="passconf"
value="" size="50" /></p></li>
<li>
<p>First Name:</p>
<p><input type="text"
name="firstname"
value="" size="50" /></p></li>
<li>
<p>Last Name:</p>
<p><input type="text"
name="lastname"
value="" size="50" /></p></li>
<li>
<p>Phone:</p>
<p><input type="text"
name="phone"
value="" size="50" /></p></li>
<li>
<p><input type="submit"
value="Submit" /></p>
</li></ul>
</form>
</body>
Output:
The following output is shown only to
validate Email. But it works with all other fields.
Email input should be in this format
abcd@some.something
RESULT:
Thus the
implementation of HTML form is done and validation of the form using
JavaScript. was done and verified successfully.
