Trigger standard HTML5 validation (form) without using submit button?

Question

Anyone who know how I can trigger the standard HTML5 validation in a form without using a submit button? (JavaScript or jQuery).

I do not want to send POST/GET request, only do the validation.

Answer 1

After some research, I've came up with the following code that should be the answer to your question. (At least it worked for me)

Use this piece of code first. The $(document).ready makes sure the code is executed when the form is loaded into the DOM:

$(document).ready(function() {     $('#theIdOfMyForm').submit(function(event){         if(!this.checkValidity())         {             event.preventDefault();         }     }); }); 

Then just call $('#theIdOfMyForm').submit(); in your code.

UPDATE

If you actually want to show which field the user had wrong in the form then add the following code after event.preventDefault();

$('#theIdOfMyForm :input:visible[required="required"]').each(function() {     if(!this.validity.valid)     {         $(this).focus();         // break         return false;     } }); 

It will give focus on the first invalid input.

Answer 2

You can use reportValidity, however it has poor browser support yet. It works on Chrome, Opera and Firefox but not on IE nor Edge or Safari:

var myform = $("#my-form")[0]; if (!myform.checkValidity()) {     if (myform.reportValidity) {         myform.reportValidity();     } else {         //warn IE users somehow     } } 

(checkValidity has better support, but does not work on IE<10 neither.)