In my humble opinion there are two different steps in a validation process (either web-based or n-tier). First the formal/structural correctness, like all required fields are filled or a given credit card number matches its structural requirements etc. Second is the technical/functional correctness, like is this given user name / password combination (which meets its structural requirements as they are filled) even a valid combination in our database.

As differentiating these two steps in a validation process, I think they have to take place in two different locations. Functional correctness does not have to be proven, if a structural correctness isn’t given. Thinking of request - response scenarios why make a request if not all structural requirements are met. As speaking in client and server side - structural validation has to be done on the client-side whereas functional validation on the server-side. Most of you will agree in this points - as this is what the majority did over the last few years.

In web applications client-side validation is mostly done by using javascript

  • and jQuery is truly the state of art library for doing javascript operations. Therefore I used the jQuery validation plugin to do some checks on a form before posting it to the server for functional checks. As the docs are quite good what is this post all about you will surely ask?!

It’s not just about how to use jQuery validation but also how to extend it with your own validation checks and how to customize the messages thrown if some validations fail.

First of some basics in using jQuery validation to get it work. It’s quite simple (as written in the docs) to wire jQuery validation to your form. By a) auto-wiring the validator to a submit button (the sample is taken from the docs, where your form has id = commentForm):

automatic jQuery validation wiring
$(document).ready(
function() {
$("#commentForm").validate();
});

or b) wiring it manually to a whatever you like (as I did it, by wiring the validator to a link):

manual jQuery validation wiring
<a href="#" onClick="Calculate(); return false;">Calculate</a>
<script language="JavaScript">
function Calculate ()
{
var quickcheckForm = jQuery("#quickcheck_form");
quickcheckForm.validate();
if (quickcheckForm.valid())
{
...
}
</script>

Next step is to tell the validator the expectations you like to have on your fields. This is as simple as before. Just chain classes together. Each class represents an attribute on your field. So what are the possibilities? There are a few build-in classes (following is just an excerpt of the most often used, I guess):

  • required
  • optional
  • min
  • max
  • email
  • url

  • date
  • dateISO
  • number
  • digits
  • creaditcard
  • range

Wiring those attributes to my sample would result to:

Class based attribute wiring
<label><input class="required digits" type="text" name="stock" id="e13" /></label>

As you can see, I bound the attributes required and digits to my input fields. A different possibility in place of classes is to set rules per javascript. (but I like the class notation a little more, because it’s much more clear to read). Same sample would result into following javascript notation:

JS based attribute wiring
$("#quickcheck_form").validate(
{ rules:
{
e13: { required: true, digits: true }
},
messages:
{
e13: { required: "Enter your stock amount", digits: "Please enter digits only" }
}
});

So these are the basics you need to use the validation plugin. So me requirements were a bit more way off mainstream (I do not really think so, but that’s a different story ;-) ) I needed some decimal validator which accepts only positive digits, 0 to 1 decimal place and up to 2 pre-decimal places.

Luckily jQuery validation offers an addMethod function to extend the common rules (aka attributes or methods):

Extending the ruleset via addMethod
jQuery.validator.addMethod(
"decimal1",
function(value, element) {
return this.optional(element) || /^(\d{1,2})$/.test(value) || /^(\d{1,2})(,\d{1})$/.test(value);
},
"e.g.: 5,9");
jQuery.validator.classRuleSettings.decimal1 = {decimal1: true};

So I added a new custom test-method decimal1 (1 = assuming the max count of decimal-places) with two regular expression matching my requirements. Wow - that was easy! I “chained” 3 possible validations together:

  1. optional –> maybe it isn’t a required field
  2. max 2 pre-decimal places without decimal places
  3. max 2 pre-decimal places with max 1 decimal place

The next requirements were to have some custom messages if any validations were broken. jQuery extend to the rescue:

Setting up custom validation messages
jQuery.extend(
jQuery.validator.messages,
{
required: "&nbsp_place_holder;Pflichtfeld",
digits: "&nbsp_place_holder;Zahlenfeld",
decimal1: "&nbsp_place_holder;Bsp.: 5,9"
});

This is a fine way to “overwrite” the default messages of jQuery validation (nevertheless jQuery validation offers some localization in may different languages). So these are some really good tools to build up client-side form validation to have some useful user-interaction on your web-ui and preventing unnecessary server-request.

Finally I like to mention another two articles dealing with client-side validation:

  1. Form validation with JavaScript
  2. About client-side form validation and frameworks