Show errors in JavaScript in HTML5 form

Issue

I have a HTML5 form with required fields:

<form id="my_form">
    <input type="text" name="myfield1" required>
    <input type="text" name="myfield2" required>
    <input type="text" name="myfield3" required>
    <button type="button" id="my_button">Check</button>
</form>

Also, I have the following jQuery code:

$('#my_button').on('click', function() {
    if ($('#my_form').checkValidity() == false) {
       //show errors
    }
});

I would like to force show HTML5 errors in //show errors line.

Solution

If you want to show the validation bubbles, at first the form should be submitted. Change the type of the button to submit and listen to submit event.

Also note that jQuery doesn't have checkValidity method, you should at first get the raw DOM element:

// on submit event browser will validate the form and show the bubbles
$('#my_form').on('submit', function() {
    if (this.checkValidity() == false) {
        return false;
    }

   // ...

});

http://jsfiddle.net/m5duh44x/

Answered By - Ram