CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Storm
Storm

Reputation: 3242

Prevent form submit but retain form validation

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?

Upvotes: 28

Views: 20054

Answers (2)

Laurence Chen
Laurence Chen

Reputation: 1848

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

Upvotes: 12

Simon Schärer
Simon Schärer

Reputation: 602

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>

Upvotes: 29

Related Questions