Check if form is valid without re-running jquery validation

Question

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

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

Per this question on how to prevent double click on submit, I'm disabling the submit button once the form has been submitted, but only if the form is valid, so the user can take corrective action and resubmit once the form is cleaned up.

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

Since the invalid-form.validate event fires before my form submission handler, I'll already know the number of errors. Does the .valid() method persist the number of errors somewhere that I can check against that value instead of revalidating the form.

Here's an example in stack snippets. Hit submit before filling in the required fields and you'll 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 to the the element in my invalid-form.validate, but this won't update when the form is valid and also couples my double click code very heavily with my custom error code. If I take out the custom error code at some later date, I'll have to rewrite the double click prevention.

Any ideas?

You should absolutely not have to have another `submit()` handler. However, since you don't technically need the `submit`, the plugin takes care of that... try a `click` hander instead. ALTHOUGH, you should not need a `click` handler either... no button capturing is needed here. — Sparky, Feb 23 '15 at 21:38
Your title is a fallacy. You cannot determine if the form is valid without "running" through the validation. — Sparky, Feb 24 '15 at 01:06
@Sparky, you misquoted me. My title is about knowing if the form is valid without "**re**-running" validation. The validation is already happening immediately before the event handler fires. I don't need to **re**validate 5 milliseconds later. That is most certainly within the realm of possibility. Here's a [demo of it happening in fiddle](http://jsfiddle.net/KyleMit/o5yjLeba/). I mentioned this as a possibility in the question, but it doesn't feel very clean to me. — KyleMit, Feb 24 '15 at 01:44
Yes, I misunderstood the wording of your title. However, the cause is clear and you've apparently solved it on your own. — Sparky, Feb 24 '15 at 04:47

score 7 · Answer 1 · answered May 14 '18 at 12:12

7

You can use below code to check form is valid without triggering UI

$('#formId').validate().checkForm()

answered May 14 '18 at 12:12

Arivu

119
1
5

Still triggers validation – Chris Nevill Apr 27 '22 at 09:28

KyleMit · Accepted Answer · 2015-02-23T23:31:39.187

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

Callback for handling the actual submit when the form is valid.

The default function behaves like this:

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

Note: form refers to a DOM element, this way the validation isn't triggered again.

Just pass in a submitHandler to validate() and add the code to disable the button like this:

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

Just be careful doing anything to the form inside of the submitHandler callback because it's easy to trigger a case of infinite recursion

Here's a demo in Stack Snippets:

$("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>

Check if form is valid without re-running jquery validation

2 Answers2

Here's a demo in Stack Snippets:

Linked