Verify the form is correct without re-authenticating jquery

Question

Using jQuery Validate , there is a way to determine if a form is valid without returning the form.

In this question, how to add submitHandler function when using jQuery Unobtrusive Validation? I am listening to the invalid-form.validate event to show the user a user error when the form has been validated and has errors.

In this question about how to prevent double clicking on submit , I will disable the submit button after submitting the form, but only if the form is valid, so the user can take corrective actions and resubmit after cleaning the form.

The problem is now invalid-form.validate fires twice.

Since the invalid-form.validate fires before the form submission handler, I already know the number of errors. The .valid() method saves the number of errors somewhere that I can check against this value instead of re-checking the form.

Here is an example in stack fragments. Before sending the required fields, click "Submit" and you will see two error messages.

 $("form").validate(); // show message on invalid submission $("form").on("invalid-form.validate", function (event, validator) { var errors = validator.numberOfInvalids(); if (errors) { alert('There is a problem with ' + errors + ' fields.'); } }); // prevent double click form submission $('form').submit(function () { if ($(this).valid()) { $(':submit', this).attr('disabled', 'disabled'); } }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> <form > <input type="text" name="Name" required /><br/> <input type="text" name="Email" required /><br/> <input type="submit" value="Submit"/> </form> 

I could save them in an element in my invalid-form.validate , but this will not be updated when the form is valid, and also strongly combines my double-click code with my error code. If I select the user error code later, I will have to rewrite the double-click warning.

Any ideas?

Answer 1

Instead of adding an extra listener to the submit form, you can use submitHandler :

Callback to handle the actual view when the form is valid.

The default function behaves as follows:

 submitHandler: function(form) { form.submit(); } 

Note : form refers to the DOM element, so validation does not start again.

Just go to submitHandler in validate() and add code to disable this button:

 $("form").validate({ submitHandler: function(form) { $(':submit', form).attr('disabled', 'disabled'); form.submit(); } }); 

Just be careful when doing anything in the form inside the submitHandler , because it's easy to trigger an infinite recursion case

Here's a demo in stack fragments:

 $("form").validate({ submitHandler: function(form) { $(':submit', form).attr('disabled', 'disabled'); form.submit(); } }); // show message on invalid submission $("form").on("invalid-form.validate", function (event, validator) { var errors = validator.numberOfInvalids(); if (errors) { alert('There is a problem with ' + errors + ' fields.'); } }); 

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script> <form > <input type="text" name="Name" required /><br/> <input type="text" name="Email" required /><br/> <input type="submit" value="Submit"/> </form>