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 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:
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
