Please wait...

We are thrilled to have you onboard at Tectual. Doesn't matter if you ask for our free advice or a billion dollar project. We adore you, respect you and spend time to understand you. You are special.

Your query is submitted with us and we'll contact you back in no time.

Close

Your comment is not submitted. Please make sure both "Name" and "Comment" are filled.

Thank you for posting a comment. It will help us and other members a lot. If you submitted a question, we will respond to it ASAP. Keep in touch.

Close
Contact Us
< Back to the Blog

jQuery Validator Plugin (Validation Plugin)

There are hips of jQuery validation Engines out there. But still some cannot be flexible enough to cover all developers need. So what you see here follow 3 goals: Easy to Use, Extendability, Remaining Short (by being modular).

Check this sample form validation:

Username cannot be blank!

Password should be just Numbers!

Login as Admin User

Please Choose an user account!

Do you like it? Let's see how easy you can have it for your development too.

How jQuery Validation (jQuery validator) Works

This system is developed based on single responsibility principle of object oriented. Which means You should use HTML for structure, CSS for appearance and JS for functionality.

It also only does the validation part and in case it is passed or failed you should handle ajax submission or whatever you want to do by using your own technique. That's why this is most flexible jQuery validation plugin. You can merge it with any input type and can show error messages almost in any format. It can validates anything as it is highly extendable.

Concept behind Validation

To validate a field there are 3 parts:

  • Field
  • Rule
  • Error Message

If a certain field fails to pass a certain Rule, a certain error message should be displayed. That was simple?And that's what this validation plugin provide.

It uses some extra HTML attributes:

Validate Presence

<input name='username' data-validate-presence='true' data-validate-error='.username-error' />
<div class='error username-error'>Name cannot be blank!</div>

In this code data-validate-presence='true' will do the magic. If the field is blank at submission the error div with class .username-error will get visible. As you see data-validate-error is a CSS selector pointing to error div.

[Note] if you have more than one elements with class username-error they all will get visible. so you can show error message in couple of places.

Validate Format

<input name='size' data-validate-presence='true' data-validate-format='/^[0-9]+$/' data-validate-error='.size-error' />
<div class='error size-error'>Should be number!</div>

In this case, we have 2 validations. one for presence and one for format check. data-validate-format accepts regex. This is powerul enought to cover many cases if you are not good with regex you should start learning it. In this example we just want to make sure numbers are entered in this field.

Validate Email

<input name='email' data-validate-email='true' data-validate-error='.email-error' />

It will validate the field against email pattern we implemented. You can override the email pattern if you want to.

Validate Confirmation

<input data-validate-confirmation='[name=email]' data-validate-error='.confirm-error' />

It can compare and make sure the field has same value as the target field. In this case target field is an element with CSS Selector [name=email]. (the value you set as value of data-validate-confirmation is the other field which is compared to this one)

Validate Checked or Selected

<input type='radio' value='1-10' data-validate-checked='true' data-validate-error='.age-error' />
<input type='radio' value='11-20' data-validate-checked='true' data-validate-error='.age-error' />
<input type='radio' value='21+' data-validate-checked='true' data-validate-error='.age-error' />

You can use data-validate-checked for checkboxes too. If the value is true. it simply check if at least one item is selected you can define a range such as data-validate-checked="2,4". This means at least 2 up to 4 items should be checked. or it can be something like "2,*" which means at least 2 item should be selected.

For Select element you should use data-validate-selected. it accepts same values as data-validate-checked.

You can see all these in action over here: jQuery Validation Samples.

[Important] You should make errors hidden by defining a class such as .error { display: none; } and assign it to all elements which are acting as error message container. check example for more detail.

Form Button

Forms button should have data-validate='formCSSSelector'. Check following code sample where button is pointing to a div which has id='form'. This flexibility can let you have buttons outside of a block and validate all the elements and on success submit the action.

How actions are executed? 

This is the coolest part as you see you assign button's action the way you want independently from form validation. But they should be after calling validations() method as shown in following example! When you click the button first validation occurs and if it fails it stop other click events for the button.

Login Validation Code

For the sample we have in the beginning of this page. we have HTML code like this:

<div id="form">
  <div class="row">
    <input data-validate-presence="true" data-validate-error="#validation1" type="text">
    <div class="error" id="validation1">Username cannot be blank!</div>
  </div>
  <div class="row">
    <input data-validate-presence="true" data-validate-error="#validation2" data-validate-format="/^[0-9]+$/" type="password">
    <div class="error" id="validation2">Password should be just Numbers!</div>
  </div>
  <div class="row">Login as
    <input name="type" value="user" data-validate-checked="true" data-validate-error="#validation3" type="radio"> Admin
    <input name="type" value="admin" data-validate-checked="true" data-validate-error="#validation3" type="radio"> User
    <div class="error" id="validation3">Please Choose an user account!</div>
  </div>
  <div class="row"><button data-validate="#form">Login</button>
  </div>
</div>

The only JS code we added is as short as this:

$('#form').validations();
$('#form button').click( function(){
  alert('all passed'); // your ajax call or whatever you want
});

And CSS like this to hide error message by default.

.error{ display: none; }

jQuery Validation Options

This plugin get 6 options:

  • validateOn: [event] This can be any of valid jQuery events for fields or any custom event. Default is 'blur'.
  • errorClasses: [object[validatorName: errorClass]] A list of error classes which will be assigned to error elements in case the relevant error raises.
  • validators: [object[validatorName: function] A list of validation methods. in case you extend it, you should add the same validatorName to errorClasses as well.
  • onError: [function( form )] This function will be called on each field test by raising an error, this keyword refers to field element
  • onResolve: [function( form )] This function will be called on each field test by resolving it's error, this keyword refers to field element
  • onComplete: [function(btn)] This function will be called whenever the form is test such as the button click, this keyword refers to form element

in addition there is $.fn.validate(); method as well. So whenever you add validation system to all fields of a form you can call $('form selector').validate() which return true or false.

Extending jQuery Validation (changing options globally)

You can extend validations easily:

$.fn.validations.options.errorClasses.age = 'age-error';
$.fn.validations.options.validators.age = function(validationValue, form){
   return this.val()>0&&this.val()<100;
}

Common mistakes

  • Classes defined in errorClasses are only for cases when you have multiple validations for one field and you want to show error messages based on priorities check "Syntax and presence test (with two custom error)" in sample page for more information.

Download

Here is the link to Download jQuery Validation Plugin 1.0.1 and here is Sample for jQuery Validator.

All versions

Discover what we say about jquery | js | tutorial | plugin |
Wed, 08 15 2012

jQuery Template (jTemplate)

jQuery Template Engine (jTemplate) is flexible and smart. Just by adding some extra directives it can merge all sort of data st...

jQuery Watermark Plugin (Best jQuery Placeholder)

This easy to use jQuery watermark plugin which adds watermark input and textarea elements. A watermark is lighter colored text ...

jQuery Editable Plugin (Best In Place Editor)

jQuery Editable (Inline Editor) WarLike all other things on the web there is kind of war between geek working on same topic. Sp...

How To Make jQuery Plugin? (jQuery Plugin Hello World)

Here is a quick how to on making your own jQuery plugin. Extending jQuery with plugins and methods is very powerful and can s...

0comments

Write a comment and start a conversation about this post.
Subscribe Valid tags are b=bold and pre=code. line-breaks are detected automatically.