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?
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>
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: stackoverflow.com/questions/1357118/…
required="required" you can also just use required. Looks better in my opinion.
preventDefault() have a problem? After any form validation errors have been fixed, then pressing submit again won't work?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.
}
}
