Form Validation with Jquery
Form Validation can be an important part of your user experience. You do not want the form to be hard to fill out or make it complicated if the user makes a mistake. The purpose for javascript validation is so that the user is not redirected and does not see a page refresh. Javascript allows for you to do this validation on the client side.
Keep in mind that javascript is only a part and that you should setup another form of validation as some users will have javascript blocked or turned off. In this case you can use a scripting language such as PHP, Ruby, CGI ect.
In this tutorial we will be using jQuery as our javascript library of choice. First we will show the code for the files and then we will describe what is going on in each line. For more information on jquery go to http://docs.jquery.com or download it at http://jquery.com validate.js
/*
* validateForm(object)
*
* This function takes in a form object and loops
* over the elements checking for required fields.
*
* @return - (bool) Whether or not the form should be submitted
*/
function validateForm (form) {
var submit = true;
var msg = '<ul class="errList">';
// Show user message that form is validating
$('#msg').show().html('<p class="validate">Validating Form</p>');
// Loop over form input and select elements
$('#' + form + ' > input, select').each(function() {
// If element has the class required check for a value
if($(this).val() == '' && $(this).hasClass('required')) {
// No Value so add to error message
msg = msg + '<li>You must select a value for ' + $(this).attr('id') + '</li>';
$(this).addClass('missing');
submit = false;
} else {
// Remove class incase it had been set on previous try
$(this).removeClass('missing');
}
});
// Errors
if (submit == false) {
$('#msg').html(msg + '');
}
return submit;
}
Ok so lets go through the code. First of we have two variables.
var submit = true; var msg = '<ul class="errList">';
The first variable is used to tell the form wether or not to submit once we are complete with our loop. The second is the start of the error message if we are in need of one.
Next is the loop which will go over each form item that is an input or select. In jquery we use # and the form id to select the form. So in our example we start with the # and then add the id which is passed into the function. The > input, select tells the loop to select all objects of input and select. The .each() grabs each matching value and loops over each one individually. We then give it a function to perform which can be inline (as is this example) or it can be a callback function.
// Loop over form input and select elements
$('#' + form + ' > input, select').each(function() {
Then we check to see if the value is empty and has a class of "required". $(this) gives us the current object in iteration of the loop. We then use the functions .val() and .hasClass() to see if it meets the requirements. The first line test for a value of '' and a class of "required". If both of these conditions are met we know that the required field has not been filled out. So we process the code after it.
if($(this).val() == '' && $(this).hasClass('required')) {
// No Value so add to error message
msg = msg + '<li>You must select a value for ' + $(this).attr('id') + '</li>';
$(this).addClass('missing');
submit = false;
This code adds to our error message by adding a message that includes the id as the name of the field. The .attr() function gets the attribute of the object. In this case we are selecting the id of the current Input or Select (You can choose what attribute you would like to use). We then add a class of "missing", which there would be css to mark this field to stand out, such as a red border. We then set submit to false so that our form will not post. If that field is not empty or not required we remove the class of missing. This is done so that if one field is fixed and another is not we remove it from our list the next loop through.
} else {
// Remove class incase it had been set on previous try
$(this).removeClass('missing');
}
Finally we check to see if submit is false. If this is the case we close out the error list and place that html in the msg div we used earlier to show that we were performing the validation and return the value of submit to the form.
// Errors
if (submit == false) {
$('#msg').html(msg + '</ul>');
}
return submit;
You can download the example files here:
Comments(0)
Post new comment