event.preventDefault() does not work in Chrome and Opera

Question

I am using jQuery Validation Plugin 1.9.0 with jQuery 1.7.2.

I want my form to be validated with jquery validation plugin. It works fine in Firefox 20.0.1 and IE 10.

Answer 1

You are misunderstanding the purpose of .preventDefault(). It's not meant for preventing the default behavior of a function. It's meant for canceling the built-in behaviors of regular elements, i.e., remove the navigation and history from an anchor tag, etc.

See: http://api.jquery.com/event.preventDefault/

AFAIK, you cannot programatically turn validation on and off. Once you initialize the plugin with .validate(), there is no method to "un"-initialize it.

However, to simply use a "cancel" button, there are several methods... one is to make sure you keep the cancel button outside of the <form></form> and then use a click handler to do something else with it.

DEMO: http://jsfiddle.net/TZVA6/1

Or another method, as pointed out by Rocket Hazmat, is to give the button a type="button" attribute which prevents the default submit action.

DEMO: http://jsfiddle.net/TZVA6/2/