jQuery Validation Plugin – form.submit()

Got pretty frustrated with this today, playing around with jQuery’s Validation plugin and had it all setup nicely, then I noticed once everything was validated I couldn’t submit the form.. Odd!

No errors in Firefox/Chrome so switched over to good old Internet Explorer which produced this error message:

Webpage error details

Message: Object doesn’t support this property or method
Line: 33
Char: 4
Code: 0
URI: http://www.example.com/globals/js/main.js

Message: Object doesn’t support this property or method
Line: 33
Char: 4
Code: 0
URI: http://www.example.com/globals/js/main.js

And this line correspondences to the form.submit() in the submitHandler, as seen bellow

submitHandler: function(form) {
$(“div.error”).hide();
form.submit();
},

Interesting.. Now the submit method is indeed supported as stated in the Validation Plugins documentation (which you can see here). So what’s breaking it?

Apparently jQuery does something funky in relation to the markup of your form if the submit button with the form markup is named the same as the method, in this case – ‘<input name=”submit” type=”submit” />’.

So the fix here would be to re-name your forms submit to something else for example – ‘<input name=”submitBtn” type=”submit” />’ should do it.

I’m just starting to get to grips with all this jQuery stuff so if anyone knows why this was happening post in the comments, be good to know for future reference!