How to force a html5 form validation without submitting it via jQuery
below code works for me,
$("#btn").click(function () {
if ($("#frm")[0].checkValidity())
alert('sucess');
else
//Validate Form
$("#frm")[0].reportValidity()
});
To check whether a certain field is valid, use:
$('#myField')[0].checkValidity(); // returns true|false
To check if the form is valid, use:
$('#myForm')[0].checkValidity(); // returns true|false
If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:
var $myForm = $('#myForm');
if (!$myForm[0].checkValidity()) {
// If the form is invalid, submit it. The form won't actually submit;
// this will just cause the browser to display the native HTML5 error messages.
$myForm.find(':submit').click();
}
Keep in mind that, HTML5 validation is not supported in all browsers till now.
I found this solution to work for me. Just call a javascript function like this:
action="javascript:myFunction();"
Then you have the html5 validation... really simple :-)