Tips for jQuery validation plugin
Because I currently work with a couple of projects where I extensively use jQuery framework, together with it’s plugins I decided to write a post in which I can gather all of my ideas, tips that i have arrived during my work with this library. I am a kind of guy that has a huge mess not only on his computer’s desktop but even within project files. It happens that when I arrive a problem, and I am sure I have figured it out in some other project but it usually takes me ages to dig through all of them to find even simplest solution. That is why I decided that I really need a place for all my tips and tricks, so I can find them easily. 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 :
$("#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):
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.