2009-09-14 Easy font-end validation with jQuery Validate

Tags: JS

This one is awesome.
It's a front-end validation library. Just run the "validate" method on the the HTML id element and with very simple set up, you can save a ton on not passing the data back and forth between the client and the server. Here's a simple example with a resume upload:

$("#proposal").validate({
focusCleanup: true,
rules:{
email: {email: true},
email2:"required",
email2: {equalTo: "#email"},
name: {required:true, minlength: 2},
location: {required:true},
resume: {
required: true,
accept: "doc|pdf|docx"
}

},
messages: {
name: {
required: "Please specify your name",
minlength: jQuery.format("At least {0} characters required")
},
email: {
required: "We need your email address to contact you",
email: "Your email address must be in the format of [email protected]"
},
email2:{
required: "Please enter your email again",
email:"Your email address must be in the format of [email protected]",
equalTo:"Please enter the same address"
},
location:'Please select location',
resume:'Please attach ".doc", ".pdf" or ".docx" files only',
},

highlight: function(element) {
$(element).css("background-color","#FFE1E1");
},
submitHandler: function(f){
$('form input[type=submit]').attr('disabled', 'disabled').val("Uploading...");
form.submit();
}
});