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.
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):
or b) wiring it manually to a whatever you like (as I did it, by wiring the validator to a link):
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):
Wiring those attributes to my sample would result to:
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):
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:
- optional –> maybe it isn’t a required field
- max 2 pre-decimal places without decimal places
- 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:
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: