submitHandler still get triggered when debug is true

[howard-repos]

used code bellow in our page,submitHandler still got triggered even if debug is true

$("#commentForm").validate({
	debug: true,
	submitHandler: function () {
		alert("submitted!");
	}
});

jquery-validation-1.16.0
chrome 59.0.3071.115

Steps to reproduce

use attched file to reproduce
debug.zip

Expected behaviour

submitHandler not get triggered

Actual behaviour

submitHandler get triggered

[Arkni]

Thanks a lot for filling this issue! we'll triage and take a look at it as soon as possible!

[ppetree]

has this been fixed yet?

[Arkni]

@ppetree

Thanks a lot for the reminder.
Unfortunately, it's not fixed yet. I haven't found the time to look into it, but will try to by the end of the week.

[ppetree]

No worries. Also, it would be super awesome if we had a flag that would disable submit actions. In mobile apps (i.e. jquery.mobile) where a form page is loaded into an existing dom, a submit action will cause the form page to be reloaded and since the form page isn't the main page, the app crashes. Setting the action=void doesn't solve the problems. Most form actions are done via ajax so invoking all those submit actions really messes things up.

[Arkni]

@ppetree

Can you please provide a demo page or a JSFiddle or JSBin?
I have never used jQuery mobile, so I have no idea what it is expected and what's not. No worries if you don't have time for that, though.

[ppetree]

I cant even begin to tell you how much loathing I have for jsFiddle or jsBin. I work 80-100 hours a week and by the time I get something created in those sites I've wasted 1/2 or more of a day. I've simply stopped using them.

I've attached the files you need sans any .css (this took all of 10 minutes to cobble together).
index.html, click the button in the footer to load the form (form.html). If you inspect form.html you'll see why the app crashes when the submit handler gets invoked and refreshes the page. In form.js, there's a comment in the validator and you'll see how it has to be worked around.

form.zip

[Arkni]

Hi @ppetree

Thanks for the demo code.

Here are some thoughts after exploring the code:

1. Don't attach the validator to your form inside an event listener. Even thought that will work in some case, but it defy its purpose. You should only put the .validate() method inside a DOM ready function or any top level function (e.g. onFormReady function in your case) since it's how the plugin is initialized. In other words, the validation plugin is not even initialized until after your button is clicked.
2. Your button has no type. That means the browser will treat it as a submit button since it is inside a form. If you want to trigger the validation manually, you should set the type of your button to button and then inside the click handler, call form.valid() (as you already do).
3. If you want to disable submit actions, you can set onsubmit option to false and the plugin will not attach the submit event handler to the form, and will not listen to the click event on the submit button.
   Setting this option to false also means the submitHandler will be ignored. The submitHandler is only used inside the submit handler attached to the form when onsubmit is set to true (which is the default value).
   If you set this option to false, clicking on the submit button will send your form without any validation, which will refrech the form as a result.

In summary, I think what you need in your case is to (without forgoting point 1 above):

• Set onsubmit option to false
• Set the type of your button to button
• Validate the form when clicking the button and submit the data if valid (as you already do)

As for this issue, I still need to gather some data before starting any fix.

[Arkni]

Marking this as a bug and reopning. Will try to fix it as soon as possible.