Form validation is the process of checking that a form has been filled in correctly before it is processed.
There are two main methods for validating forms: server-side (using ASP, PHP, etc), and client-side (usually done using JavaScript). Server-side validation is more secure but often more tricky to code, whereas client-side (JavaScript) validation is easier to do and quicker too.
In this tutorial I have built a complete sign up form with client-side JavaScript validation. Here is complete code
Below is form starting tage in which onSubmit event I call a validation function named validation_for_signup().
<form name="signup" action="" onSubmit="return validation_for_signup()" method="post">
Validation for Username field:
function validation_for_signup()
{
var check_username = /^[a-zA-Z0-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;
}
}
This function uses a variable check_name to which a regular expression rule is assigned. This regular expression only allows alpha-numeric digits and underscore when we will compare it with user’s entered value.
We uses document.signup.username.value for getting value from username field.
Where document is the parent object of "form", signup’ is the name of the form, username is the name of the text field and value is the value of input field named username.If condition cheches either value is empty or not. If user not filled the box pop ups a message “please enter username”. For this purpose we uses alert(‘please enter username’). This is a built in fucntion of java script.
Document.signup.username.focus()
This built in function focus the username field when user chlick ok from pop up.
Return false;
This stops the form submition. If you return true the form will be submitted either value is empty or not.
Else If condition cheches either test(document.signup.username.value) function returns true or false. If false a message will pop up “invalid username”. test() function matches either value is following the rule defined in regular expression or not for this purpose i uses check_username.test(document.signup.username.value). It returns true if user entered value is according to rule defined and assigned to variable check_username else it returns false.
Validation for Email field:
If you have read validation for username field it will be same only we have to define regular expression rule different from rule we defined for username field. For example.
If you have read validation for username field it will be same only we have to define regular expression rule different from rule we defined for username field. For example.
function validation_for_signup()
{
var check_email = /^[\w\.]+@[a-zA-Z_]+?\.[a-zA-Z\.]{2,6}$/;
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;
}
}
Validation for Password field:
function validation_for_signup()
{
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;
}
}
Validation for Firstname, Lastname and for Phone Number:
It is very simple only you have to define regular expression rules for firstname and lastname which allow only alphabetic and for phone number which allow only numeric. The rules I have defined below also matches that minimum length of entered value must be 3 and maximum length must be 16, You may change it according your requirement.
It is very simple only you have to define regular expression rules for firstname and lastname which allow only alphabetic and for phone number which allow only numeric. The rules I have defined below also matches that minimum length of entered value must be 3 and maximum length must be 16, You may change it according your requirement.
function validation_for_signup()
{
var check_name = /^[a-zA-Z]{3,16}$/;
var check_phone = /^[0-9]{3,16}$/;
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;
}
}
0 comments:
Post a Comment