Wednesday, June 2, 2010

jQuery AJAX Validation Using The Validity Plugin

Books I recommend on this subject

The following book is the best reference I have found when working with jQuery. I highly recommend it!

jQuery in Action

jQuery Validity

Input validation is one of those areas that most developers view as a necessary evil. We know that it is necessary and we really do want to ensure that we get good input from our users. But most of us are lazy (me included) and input validation is one of those things that gets done but usually is a quick and dirty implementation. This is partly due to laziness and partly do to input validation being painful.

Thanks to the amazing jQuery Validity plug in, input validation can be really slick, easy and robust enough to work any any scenario. I specifically like the Validity plugin because it supports jQuery AJAX input validation. Other input validation implementations that I have worked with require a form post to take place. However, if you are using jQuery.ajax methods then there isn’t a form and you need to validate the formless input.

Here is the download link for the jQuery Validity plugin: http://code.google.com/p/validity/downloads/list

Here is the documentation for the jQuery Validity plugin: http://validity.thatscaptaintoyou.com/

What It Looks Like

The default UI for the validation feedback is pretty nice, take a look:

jQueryValidityScreenshot

HTML Input

Here is the HTML markup that I used to create the inputs to validate:

<fieldset id="SignUpFields">
<legend>Sign Up</legend>
<label>Name</label>
<input type="text" id="txtbxName" />
<label>Email</label>
<input type="text" id="txtbxEmail" />
<label>Password</label>
<input type="password" id="txtbxPassword" />
<label>Confirm Password</label>
<input type="password" id="txtbxConfirmPassword" />
<label>How Did You Hear About Us?</label>
<input type="text" id="txtbxSource" />
</fieldset>
<button id="btnSubmit">Submit</button>


jQuery and Validity Functions


The jQuery Validity code is extremely straight forward and minimal.


$(function () {
// Handle the click event for the submit button
$('#btnSubmit').click(function () {
// Validate the fields
if (ValidateFields()) {
// All fields are valid, $.ajax POST would go here
$('#SignUpFields').hide();
$('#btnSubmit').hide();
$('#lblResponse').show();
}
});
});

function ValidateFields() {
// Start validation:
$.validity.start();

// Validate fields
$("#txtbxName").require();
$("#txtbxEmail")
.require()
.match("email");

// Validate password strength & match
$("input[type='password']")
.require()
.match(/^.{8,20}$/, "Passwords must be at least 8 characters.")
.equal("Passwords do not match.");

// All of the validator methods have been called:
// End the validation session:
var result = $.validity.end();

// Return whether it's okay to proceed with the Ajax:
return result.valid;
}


That's It!


That's all it takes, very simple and straight forward. Just that tiny bit of Javascript gives you rich input validation and a nice user experience!


Demo Download


Here is a little ASP.NET MVC demo that I threw together using jQuery Validity so you can see it in action and play with it.



- Aaron Schnieder
http://www.churchofficeonline.com

4 comments:

Joel Dahlin said...

Thanks for putting this together. You're right, validation is something that I know is needed but lazy about doing it.
This will really be useful, thank you!

Joel Dahlin | www.dahlindevelopment.com

Anonymous said...

Is there a corresponding Server side validation?

Norm said...

Re. server-side validation,even an AJAX call to the server is not sufficient. If a user has JavaScript turned off, all of the client-side validation will be inoperable. It's imperative that server-side validation, via PHP, ASP.NET, etc. still occur. The client-side validation should strictly be for the user's benefit.

Ecommerce Website Developer said...

If a user has JavaScript turned off, all of the client-side validation will be inoperable. It's imperative that server-side validation, via PHP, ASP.NET, etc. still occur