Why does checkValidity or reportValidity triger automatic submit of a form in jquery?

Question

Consider the following code:

$("button[type='submit']").click(function(e){ 
  if($(this).closest("form").checkValidity()) {
    $(this).closest("form").reportValidity();
  }   
  e.preventDefault();   
  alert("Never happens!!!");   
});

If the input data is valid and then I press the submit button, the php form is submitted without letting e.preventDefault(); and alert("Never happens!!!"); to get executed. I suspect this happens because checkValidity and reportValidity return true, which acts as a return true; statement.

Consider this code:

$("button[type='submit']").click(function(e){         
  e.preventDefault();   
  alert("Does happen!!!");   
});

This time I see the alert, meaning preventDefault stopped the form from being submitted. What is strange to me even if checkValidity and reportValidity return true, how can they act as return statement for the jquery click function?

It should be noted that the following approach doesn't work either:

$("button[type='submit']").click(function(e){ 
  e.preventDefault(); 
  if($(this).closest("form").checkValidity()) {
    $(this).closest("form").reportValidity();
  }          
  alert("Never happens!!!");   
});

I think preventDefault prevents checkValidity and reportValidity to work properly and forces them to return false, which somehow acts as return false; statement causing the alert to not get executed.

Another possible explanation could be that calling either checkValidity or reportValidity causes the form to get submitted. I don't know why would that be the case.

Please give an explanation with reference to official documentation.

My guess is that your script breaks. For instance if the script for the validation plugin fails to load, calling `$(this).closest("form").checkValidity()` will result in an error and prevent any further script commands from executing. This explains why you never see the alert. Did you check your browser console for error messages? — , Dec 30 '21 at 13:33
@ChrisG Ahhh. such as naïve mistake... I am supposed to use `$(this).closest("form")[0]`. I am not using any plugin, rather the native html5 validation api. — user31782, Dec 30 '21 at 13:43

Rory McCrossan · Answer 1 · 2023-03-07T16:31:12.353

2

checkValidity() and reportValidity() are not methods of a jQuery object. You need to call them on the underlying form Element object instead.

It also seems from the context that the logic in the if condition needs to be inverted so that the reportValidity() is called only when the form is invalid - along with the e.preventDefault() to stop the actual form submission.

$("button[type='submit']").click(function(e) {
  let form = $(this).closest('form').get(0);
  if (!form.checkValidity()) {
    form.reportValidity();
    e.preventDefault();
  }

  console.log("Will always happen");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<form>
  <input type="text" name="foo" value="" required />
  <button type="submit">Submit</button>
</form>

That being said, your JS code is completely redundant as you get this exact behaviour for free by default when you apply the required attribute to any control within the form:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" name="foo" value="" required />
  <button type="submit">Submit</button>
</form>

edited Mar 07 '23 at 16:31

answered Dec 30 '21 at 14:00

Rory McCrossan

331,213
40
305
339

Actually I am intentionally not allowing submit even for correct input, I rather show another bootstrap modal for further conditional checks. I show the modal only when the primary input is valid. The whole question is just a silly mistake. – user31782 Dec 30 '21 at 14:07
In which case the answer above still works, you can simply move the `preventDefault()` outside the `if` – Rory McCrossan Dec 30 '21 at 14:12
I didn't nee to use both `reportValidity` and `checkValidity` togther. `form.reportValidity();` just return `false` or `true` which does nothing in the current logic. In my actual code I ended up using `if(!$(this).closest("form")[0].reportValidity()) { $(this).submit(); } ` This way I can see the browser default tooltips and later I use `preventDefault` to make sure the form doesn't get submitted with correct input. – user31782 Dec 30 '21 at 14:17

Why does checkValidity or reportValidity triger automatic submit of a form in jquery?

1 Answers1