After spending nearly four hours debugging a script, there is a definite answer. But before I give you the answer, let me walk you through what happened.
I’ve validated forms before using the jQuery.validate.js extension. It’s definitely the easiest tool to use for form validation, since it doesn’t require any special divs or spans to display its error messages. (Although, if you wanted to display the messages in special divs, there’s a way to do that as well.) All you do is code your html form, making sure to give every input to be validated a proper id. Then you create a rule in your script (inside the $(document).ready (function()); This is important, because of what I’m going to say next.)
Your code will look something like this:
$(document).ready(function () {
$("#form").validate({
rules: {
fname: {required:true, minlength: 2},
lname: {required:true, minlength: 2},
address:{required:true, minlength: 5},
city: {required:true, minlength: 2},
state: {required:true, minlength: 2},
zip: {required:true, minlength: 5},
phone: {required:true, phoneUS:true},
email: {required:true, email:true},
},
messages: {
fname: " Please enter your first name",
lname: " Please enter your last name",
address: " Please enter your address",
city: " Please enter your city",
state: " Please enter your state",
zip: " A 5-digit zip code is required",
email: " Valid Email Required",
phone: " Valid US Phone Number Required"
}
});
});In order to get the phone number validated, you will need to add a method, which you can just cut and paste in before the $(“#form”).validate() function and after the $(document).ready (function() {
$.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
Once you have your rules and messages defined, you’re almost there. The only other thing is to handle the form submission. My favorite way of doing this is using a submitHandler, which disables the form from submitting until it is validated. If you need to use AJAX, the submitHandler method will also allow submission via AJAX.
submitHandler: function(form) {
$("#form2").submit();
}
So your final form validation will look like this:
$(document).ready(function () {
$.validator.addMethod("phoneUS", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
return this.optional(element) || phone_number.length > 9 &&
phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");
$("#form").validate({
rules: {
fname: {required:true, minlength: 2},
lname: {required:true, minlength: 2},
address:{required:true, minlength: 5},
city: {required:true, minlength: 2},
state: {required:true, minlength: 2},
zip: {required:true, minlength: 5},
phone: {required:true, phoneUS:true},
email: {required:true, email:true}
},
messages: {
fname: " Please enter your first name",
lname: " Please enter your last name",
address: " Please enter your address",
city: " Please enter your city",
state: " Please enter your state",
zip: " A 5-digit zip code is required",
email: " Valid Email Required",
phone: " Valid US Phone Number Required"
},
submitHandler: function(form) {
$("#form").submit();
}
});
});
Now that your form is validated, everything should work, right?
Well, not necessarily. This is the time to get out your FireBug and see what the console says. I was getting a “form is null” error. This means that the form has not yet loaded on the page. The $(document).ready function calls when the page is delivered to the browser, even if not all of the material has finished loading. So if you’re using WordPress, the code must be after the wp-head() function.
So, make sure that when you are using WordPress, that you are putting your jQuery after the wp-head() function and you’ll be very glad you did. This principle holds true anytime your page is dynamically created, because client side scripts start running before the entire page hits the browser, meaning that code not yet delivered can’t be selected by jQuery.
