Jquery validation in IE 8 - Object doesn't support this property or method for drop down box - validationrules

Question

I'm using jquery validation to validate my form. It works well on text box but when I try to validate a drop down, it throws me an "Object doesn't support this property or method" error in IE 8 only. It works fine in FF or Chrome. Not sure if I did something wrong. I even try not to use the custom "notEqual" function to test it and replace it with the build in "required" method. Again, it's giving me the same thing.
Please help! Much appreciate!
Here's my code:
$(document).ready(function () {
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value != param;
}, "Please specify a different (non-default) value");
$("#form1").validate({
focusInvalid: false,
focusCleanup: true,
debug: false,
onkeyup: false,
onclick: true,
onsubmit: true,
onkeyup: false,
rules: {
<%=titleText.UniqueID %>: {
required: true
},
<%=startDateText.UniqueID %>: {
required: true ,
date: true
},
<%=endHourText.UniqueID %>: {
notEqual: "00"
},
submitHandler: function(form) {
form.submit();
}
},
messages: {
<%=titleText.UniqueID %>: {
required: "Please provide a name for the event."
},
<%=startDateText.UniqueID %>: {
required: "Please enter a date for the event.",
date: "Please enter a valid date."
},
<%=endHourText.UniqueID %>: {
notEqual: "Please enter a valid end time."
}
}
});
});
Thanks in advance!!

Answer 1

Aha, I found this out the hard way myself just the other day. JQuery Validator attempts to access the 'form' property of the select element and if this is null, JQuery Validator blows up with the error you have described.
I'm not entirely sure why element.form would be null for you. I was never entirely clear why it was null for me either, unless it was related to the fact that validation was firing even as the HTML containing this particular select element was being removed from the DOM.
I solved this by adding a check to my validation code so that I only validate a select element where element.form != null. You may also need to check that element.form exists as in Firefox there's no such property:
if (element.form && element.form != null) { ... }