[jQuery] default submit is not prevented when using jquery.validate with submitHandler
I am trying to use jquery.validate and jquery.form together, following
the example here:
http://jquery.bassistance.de/validate/demo-test/ajaxSubmit-intergration-demo.html
Looking in the validate documentation, I see that submitHandler is
supposed to prevent the default form submit: and it certainly seems to
do so on the example above: but in my case the default submit is still
firing (sending me to the form's action page). That does NOT happen
when I use $(form)ajaxForm() in place of $(form).validate().
I have got a workaround, which is to specifically add a submit event
to the form, returning false to prevent the default action: but it is
not clear to me why I would need to do this when the example above
does not.
Here are the relevant bits of my code:
$(document).ready(function() {
$("#verify_form").validate(VSFW.verify_card_validation);
// not sure why this is necessary, since the validate submitHandler
// _should_ prevent the default action. this makes sure it does.
$("#verify_form").submit(function () { return false; });
});
VSFW.verify_card_validation = {
submitHandler: function(form) {
$(form).ajaxSubmit({ dataType: "json", success:
VSFW.process_card_verification });
},
rules: {
zip: { required: true, digits: true, minLength: 5, maxLength: 5 },
bin: { required: true, digits: true, minLength: 6, maxLength: 6 }
},
messages: {
zip: "5-digit US zip only",
bin: "6 digits only"
}
};