jQuery submit button event handler prevents form validation for required input fields

Question

I have a HTML form with input fields which are required, for example:

<input type="number" required="required" />

The submit button of my form is controlled by a jQuery event handler:

$('#submitButton').on('click', function(event){
  return false;
});

The fact that the submit button handler returns false leads to the problem that there is no automatic check for the required fields by the web browser. If I remove "return false" then there is a check (see screenshot) but then the page gets reloaded (which I don't want).

Is there a way, to use the browser's error correction without a page refresh after a form submit action?

enter image description here

mcintyre321 · Accepted Answer · 2013-09-30 14:45:51Z

1

I think you want to try something like:

$('#submitButton').on('click', function(event){
    return $("<some selector for the input>")[0].checkValidity();
});

answered Sep 30, 2013 at 14:45

mcintyre321

13.4k8 gold badges70 silver badges103 bronze badges

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

Collectives™ on Stack Overflow

jQuery submit button event handler prevents form validation for required input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related