jQuery is a JavaScript Library that simplifies the creation of dynamic HTML documents that work for every browser. It allows for user generated plugins to extended functionality.

One useful jQuery Plugin is Validation. This Plugin allows you to quickly and easily check to ensure that the values entered into a form by the user are accurate. This functionality helps improves the usability of a webform and the accuracy of the data collected by giving the user feed back as they are entering data. Below is a quick example of what might look like:

Once you have jquery and the validation plugin installed on your site it is very simple to configure the validation plugin to check the accuracy of the data entered. The following is all that was required to configure the form above:

jQuery(document).ready(function(){
  jQuery('#testForm').validate({
    rules: {
      pass: {
        minlength: 5,
       },
      pass_again: {
        equalTo: '#pass',
        minlength: 5
      }
    }
  });
});

You should never rely on client side data validation alone. It is possible that the browser has Javascript disabled or that someone with malicious intent might try to circumvent the validation. Check out Toby’s article on PHP’s filter function for an example of server side data validation.

2 Responses to “Data Sanitization with jQuery Validation Plugin”

1. Michael Henninger says:

   July 7, 2009 at 3:01 pm

   Found a decent article about data validation (mostly client side) for web form.

   http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/
2. Ed Sawyer says:

   August 31, 2009 at 10:50 am

   We use jQuery quite a bit in WebSolutions, I’ve basically standardized on it as the go-to JS library for anything I do. ColdFusion (which we use a lot) has built-in JS variable validation which we use quite a bit for this purpose. Agreed that validation needs to happen server-side as well.

   -Ed