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
– Sparky, Commented Feb 23, 2015 at 21:38
Your title is a fallacy. You cannot determine if the form is valid without "running" through the validation. — Sparky
– Sparky, Commented Feb 24, 2015 at 1: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 revalidate 5 milliseconds later. That is most certainly within the realm of possibility. Here's a demo of it happening in fiddle. I mentioned this as a possibility in the question, but it doesn't feel very clean to me. — KyleMit
– KyleMit ♦, Commented Feb 24, 2015 at 1:44
Yes, I misunderstood the wording of your title. However, the cause is clear and you've apparently solved it on your own. — Sparky
– Sparky, Commented Feb 24, 2015 at 4:47

Arivu · Accepted Answer · 2018-05-14 12:12:01Z

7

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

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

answered May 14, 2018 at 12:12

Arivu

1191 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Nevill Over a year ago

Still triggers validation

KyleMit · Accepted Answer · 2015-02-23 23:31:39Z

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>

Collectives™ on Stack Overflow

Check if form is valid without re-running jquery validation

2 Answers 2

1 Comment

Here's a demo in Stack Snippets:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Here's a demo in Stack Snippets:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related