Amparo Amparo - 1 year ago 97
jQuery Question

Show errors in JavaScript in HTML5 form

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>

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

Answer Source

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;

   // ...


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download