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 f

Solution 1:

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;
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction=""method="post"><inputid="name"type="text"required="required" /><inputid="email"type="email"required="required" /><inputtype="submit"id="btnSubmit" /></form>

Solution 2:

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

Assume your form has id as FORM_ID

Sample code:

functionhandleSubmit (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