Front-end validation with jQuery Validation Plugin

First let's talk about why do we need to consider about front-end validation, As we all know front-end validation is done on the client side. Let's take a look at the the architecture of a normal application.

1.0 - Server./Client Architecture

As you can see if we don't use front-end validation to do simple validations such as null checking, min-length, max-length etc it'll consume lot of server's resources, But server-side validation is a necessity. You can't simply ignore server-side validation because you have used front-end validation, reason is users cannot be trusted and there are plenty of ways to bypass front-end validations. When you're trying to implement front-end validation it's kind of a tedious task because we have to implement all the event listeners and individual checkers for them. This is where jQuery Validation Plugin comes in.

jQuery plugin makes simple client-side form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in English and translations into 37 other languages.

You can download the plugin by visiting http://jqueryvalidation.org/. Configuration is very easy, First

you need to do is initialize.

2.0 - Example code

As you can see first we have to select the form we need to validate. And other essential parameters are listed below

• ignore : defines the things the validator needs to ignore.

• rules : defines the rules apply to specific elements

• errorPlacement : used to define the position of the error message.

Hope you got an idea about the plugin.