Often we use forms in all web pages. Forms takes the data from the user and then sents it into particular pages for action. But what is the proof that the sent data is correct or if the user has mistyped information in fields. In that case, form validation is used in order to validate the data which has been entered. We can validate the data either in server side after submitting or in client side after entering the data. Here client side validation will be good as the client can make changes soon.
Validating the form using jQuery is simple. As user will enter the data in fields it will be validated, so no need of refreshing the page, success and error reports will be shown as we enter the data.
Here jquery.validate.js is the file which is developed by the jQuery development team which contains all the codes which will handle the form and fields. So it will be easy as plug and play if provide necessary data in the script. Just before validating the form we have to include the .js library file and jquery.validate.js file.
Lets have a look of an example form
Here in the above example 4 fields are there and the minimum length is 5 default. As the user enters the name in "name field" and moves to next tab, as it looses its focus it checks the length and if it is less then it displays the error message or else displays as valid. In the same way validation is carried out for each field. In the confirm password, it rechecks the entered value with the previous password field. If all the data entered in the form is correct then it submits the form calling the form.submit() function.
messages:
{
password: {
required: "Provide a password",
rangelength: jQuery.format("Enter at least {0} characters")
},
password_again: {
required: "Repeat your password",
//minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
}
}
form.submit();
}
});
}); </script>
Here in this code, at first validate(function) with the argument of form's name i.e "myform" is called in order to validate. Then the submit handler function is called which contain set of rules & messages which are defined for the individual fields in the form. Here the length, requirement of entered value is checked individually and if the fields are correct then valid is flagged out else invalid. Special case is in password field where confirmation password is matched with previous password field.
In the messages, error messages & success messages are written. If all the fields are validated then the form will be submitted.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<script src="http://code.jquery.com/jquery-1.3.2.js"></script>
<script
type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script
type="text/javascript">
jQuery.validator.setDefaults({
debug:
true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
submitHandler:function(form){
rules: {
name:"required",
email:"required",
password:"required",
name:
{
required:true,
minlength:5
},
email:
{
required:true,
email:true
},
password:
{
required:true,
minlength:5
},
password_again: {
equalTo: "#password",
minlength:5,
required:true
}
},
messages:
{
password: {
required: "Provide a password",
rangelength: jQuery.format("Enter at least {0} characters")
},
password_again: {
required: "Repeat your password",
//minlength: jQuery.format("Enter at least {0} characters"),
equalTo: "Enter the same password as above"
}
}
form.submit();
}
});
});
</script>
