Web Form Validation the Right/Simple Way.

Another topic that isn't all all new.  There are millions of forms out there and they all do user input validation differently.  The long and the short of this article is that there are many approaches but we want a best practice that meets a few requirements.  It must be quick, efficient, simple to configure, but able to do all the validation logic we may need.  There are lots of frameworks or custom code to do this but as I mentioned I am going for the most elegant solution here.  So here is goes, here is a sample form with the validation logic.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
 $("#myForm").validate();
}
</script>

<form action='?' method='post' id='myForm'>
 <p>
   <label for='firstName'>First Name:</label> <input name='firstName' id='firstName' class='required' type='text'>
 </p>
 <p>
   <label for='lastName'>Last Name:</label> <input name='lastName' id='lastName' class='required' type='text'>
 </p>
 <p>
  <label for="custType">Type:</label> <select name="custType" id="custType" class='required'>
   <option value=""></option>
   <option value="vendor">Vendor</option>
   <option value="salesrep">Sales Rep</option>
   <option value="supplier">Supplier</option>
   <select>
 </p>
 <p>
  <label for='emailAddress'>Email Address:</label> <input name='emailAddress' id='emailAddress' class='required email' type='text'>
 </p>
 <p>
  <label for='primaryPhone'>Phone Number:</label> <input name='primaryPhone' id='primaryPhone' class='required phoneUS' type='text'>
 </p>
 <p>
  <label for='zipCode'>Zip Code:</label> <input name='zipCode' id='zipCode' class='required zip' type='text'>
 </p>
 <p>
  <input type='submit' name='save' id='save' value='Save'>
 </p>
</form>

This might look quite impel but in reality is is doing nearly all the validation we need for this simple form.  I am using the jQuery Validation plugin to do all the heavy lifting here.  This is also a very elegant solution.  You will notice that there is only one javascript call on the page yet all the fields are being validated.  How you ask? While the documentation doesn't covert it very well but jquery.validation will acutely use the css class markup to apply validation rules.  See the form controls that have the classes required, email, phoneUS, and zip.  These are what trigger the validation logic.  In essence this is the same to the following script tag but this little know markup is much cleaner.

$("#myForm").validate({
   rules: {
     firstName: "required",
     lastName: "required",
     custType: "required",
     emailAddress: {
       required: true,
       email: true
     },
     primaryPhone: {
       required: true,
       phoneUS: true
     },
     zipCode: {
       required: true,
       digits: true,
       minlength: 5,
       maxlength: 5
     }
   }
})

Now you can see why the css markup trick is a lot cleaner.  It also keeps the rules along with the fields they are affecting to it is easier to track down problems with the validation.

On another point you may notice that the first sample I posted is not validating the phone number and zip code properly.  That is because I created custom class rules and methods that are not in the validation framework.  The following class rule, think alias or marco, and method need to be added to the script tag after the validation include or more simply just added to a site wide script file.  The first is a macro that applies multiple rules as a set.  This also allows you to apply rules with parameters witch you can't do in the css markup.  The second is an entirely new method that does some complex regular expression validation.

jQuery.validator.addClassRules({
  zip: {
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, "");
 return this.optional(element) || phone_number.length > 9 &&
  phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

This approve can now be used to add as complex of validation logic as needed.  The user will automatically see nice callouts when they try to submit the form with errors on it.  Also of note this solution will fail gracefully so if there is a script error or javacscript is just unavailable the page will still function and post to the server.  Now with that in mind it brings me to my final point.  The receiving server side script should always to its own validation to catch not only these rare cases where javacript is disabled or some other error occurred, but also to catch cases there some user is intentionally trying to submit invalid data.  And clint side validation like this can easily be disabled but the end user and a invalid form submitted.  Thus the onus is always on the server code/database for true validation.