27

How do I retain the default HTML form validation and yet prohibit form submitting? I have tried using event.preventDefault() and return false. Both are successful in stopping the form from submitting but both fail in form validation. I have also tried this solution, but even that does not work.

Is anybody able to help me?

Community
  • 1
  • 1
Storm
  • 3,062
  • 4
  • 23
  • 54
  • this might resolve your issue if your are using react.js [enter link description here](https://stackoverflow.com/questions/39809943/react-preventing-form-submission/39959265)https://stackoverflow.com/questions/39809943/react-preventing-form-submission/39959265 – chenchunaidu Mar 10 '20 at 09:53

2 Answers2

28

Both event.preventDefault() and return false; work if used on form submit. The HTML 5 validation is still present. 

jQuery("form").submit(function(e){
  e.preventDefault();  
  //or
  //return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post">
  <input id="name" type="text" required="required" />
  <input id="email" type="email" required="required" />
  <input type="submit" id="btnSubmit" />
</form>
totymedli
  • 29,531
  • 22
  • 131
  • 165
Simon Schärer
  • 592
  • 5
  • 10
  • Note that return `false` from a jQuery event will *also* invoke an implicit `event.stopProgagation()`. From a non-jQuery event it will only fire `event.preventDefault()`. So the two approaches you give do have different outcomes. See SO here: https://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Jason Aug 06 '17 at 00:27
  • Instead of using `required="required"` you can also just use `required`. Looks better in my opinion. – Denis.Sabolotni Apr 23 '20 at 14:06
  • 1
    Doesn't `preventDefault()` have a problem? After any form validation errors have been fixed, then pressing submit again won't work? – Carson Holzheimer Sep 03 '21 at 00:45
12

I use checkValidity() and reportValidity() to solve this problem.

Assume your form has id as FORM_ID

Sample code:

function handleSubmit (e) {
  e.preventDefault(); 
  var ele = document.getElementById("FORM_ID");
  var chk_status = ele.checkValidity();
  ele.reportValidity();
  if (chk_status) {
    ...
    // do your customized submit operations here.  
  }
}

reference

Laurence Chen
  • 1,738
  • 1
  • 13
  • 15