This post focuses on jQuery Validation plugin, as i think this is the second thing i add to my project – after jQuery core file . I will add more and more tips from time to time as soon as I find something worth to write down.

Ever worked with one of most popular jQuery validation plugins? This is extremely powerful and yet flexible plug-in that  makes form validation in javascript really easy.

Beside that fact that it already contains most popular validation rules, like checking field length, validating email or url format, it enables you to write your own “rule”.

1. Adding new method

Plugin supports method called ‘equalTo’. It is widely used – especially we request password confirmation. What is not supported is ‘notEqualTo’ method. Not that popular but can be useful from time to time. Let us say we have a field that needs to be different from other field, like new password has to be different than old password – maybe not the best choice but draws the picture.. OK, I guess recommended way to do that would be to add new method to jQuery validation plugin:

  jQuery.validator.addMethod("notEqualTo",
                             function(value, element, param) {
                                  return this.optional(element) || value != $(param).val();
                             }, "This has to be different...");
  $("#change-password-form").validate({
                rules: { ... newPassword: { notEqualTo:'#currentPassword' } },
                messages: { newPassword: { notEqualTo: "New password has to be different than old one" } }
  });

2. Preventing double form submission

Another common issue every web developer arrives sooner or later is so called ‘double form submit’. Or going further on ‘multiple form submit’. It happens when user accidentally presses submit button couple of times, causing form to be send multiple times. If we have validation plugin for our form we can make use of submitHandler method to disable button after form is submitted.

  $("#sample-form").validate({
                submitHandler: function(form){
                    if(!this.wasSent){
                        this.wasSent = true;
                        $(':submit', form).val('Please wait...')
                                          .attr('disabled', 'disabled')
                                          .addClass('disabled');
                        form.submit();
                    } else {
                        return false;
                    }
                }
            });

3. Turning on/off validation under certain conditions

It happens quite often that we require input in certain field only when some other element is selected. I just finished making web page that allows users to subscribe to newsletters on their request.  If user selects certain check-box – it means he want to subscribe and we require from him to put valid email in other field.
Otherwise, we want to keep validation turned off. To do this, we use :

<label for="cbxSubscribe"> Would you like to subscribe?</label>
<input id="cbxSubscribe" type="checkbox" />
<input id="txtSubscriptionEmail" name="subemail" />

$("#sample-form").validate({
  rules: {
    txtSubscriptionEmail: {
      required: "#cbxSubscribe:checked"
    }
  }
});

As simple as that. Element ‘txtSubscriptionEmail’ is required depending on evaluation of ‘#cbxSubscribe:checked’ expression.

4. Use CDN from Microsoft AJAX

Surprise, Surprise! ASP.NET MVC 2 (since preview 2 i guess ) includes jQuery validation plugin to provide client side validation. Definitely good news!

Moreover, Microsoft now provides CDN for plugin:

• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js
• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js

As well as documentation for visual studio – this would allow IntelliSense to work under visual studio (2008 and up):

• http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js

You should make use of CDN wherever possible. It saves you bandwidth, most probably Microsoft serves content faster and there is always a chance your visitors will have it cached already. Note that Google offers CDN for jQuery and some other libraries: Google AJAX libraries API.

Stay tuned for more updates….

I will keep on adding more tips in future.

Related posts:

1. Firefox 3.0: 411 Length required with JQuery
2. ASP.NET MVC 1.0 issue within HtmlHelper.GetModelStateValue method