jQuery validate on modal form not working in IE
I am using jQuery validate on a modal form. It works fine in FF, but not in IE 7/8. I am not getting any error, the form just submits without firing the validation.
I have tried what solutions I could find on the forums but to no avail. Any idea would be appreciated.
Here is my JS code:
jQuery.validator.addMethod("phoneUS", function(phone_number, element) { //custom phoneUS
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");
$("#htmlform").validate({
rules: {
c1FirstName: {
required: true
},
c1LastName: {
required: true
},
c2FirstName: {
required: true
},
c2LastName: {
required: true
},
c11HomePhone: {
required: false,
phoneUS: true
},
c13WorkPhone: {
required: false,
phoneUS: true
},
c12CellPhone: {
required: false,
phoneUS: true
},
c21HomePhone: {
required: false,
phoneUS: true
},
c23WorkPhone: {
required: false,
phoneUS: true
},
c22CellPhone: {
required: false,
phoneUS: true
}
},
messages: {
c1FirstName: " ",
c1LastName: " ",
c2FirstName: " ",
c2LastName: " ",
c11HomePhone: "Invalid #",
c12CellPhone: "Invalid #",
c13WorkPhone: "Invalid #",
c21HomePhone: "Invalid #",
c22CellPhone: "Invalid #",
c23WorkPhone: "Invalid #"
},
// specifying a submitHandler prevents the default submit
submitHandler: function() {
displayStaticMessage(
"<div id='contentArea'><strong>Contact Information Saved </strong><div id='closeButton'><input type='image' src='staffdir_files/images/dialog-close.png' onclick='window.location.reload();closeMessage();return false;' alt='Close Dialog'></div></div>"
);
}
});
// bind form using ajaxForm -- Allows to be submitted via ajax
$('#htmlform').ajaxForm({
});