Show errors in JavaScript in HTML5 form

Question

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.

Answer 1

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/

Answer 2

What about adding a prompt field inside form and change its HTML value depending on error?

HTML

<form id="my_form">
    <div id="prompt"></div>
    <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>

JS

$('#my_button').on('click', function() {
    if ($('#my_form').checkValidity() == false) {
       $('#prompt').removeClass().addClass('error').html('your error message');
    }
});

Of course, you can use this div to prompt both success and error messages. To perform it, you can create proper CSS styles i.e.

CSS

.success {
   background-color:green;
}
.error {
   background-color:red;
}

and assign the proper class depending on your needs (see snippet above).

Answer 3

Just add a div responsible for error messages...

<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>
<div id="errors"></div>

//JS Part

$('#my_button').on('click', function() {
 if ($('#my_form').checkValidity() == false) {
    //show errors in the error DIV
    $("#errors").empty();
    $("#errors").text("error message");
 }
});

Answer 4

I have the same problem, html5 bubbles do not appear when you capture the on.click event and do something with it, for example to continue with ajax after the html5 validation.

I have observed that if there is any code (a simple alert) in the capture of the click event, it is not shown the validation errors of html5 corresponding to each field (the bubbles)

It is intended that the validation of existing html5 works (that this is not lost and work correctly) and that greater than that can capture the click event and continue doing operations from javascript

HTML5 whith require inputs where bubble must apear!

  <form id='form_insertar' method="post">
  <div class="modal-body">
    <div class="form-group">
      <label for="first_name">First Name</label>
      <input type="text" id="first_name" placeholder="First Name" class="form-control" maxlength="100" required />
    </div>

    <div class="form-group">
      <label for="last_name">Last Name</label>
      <input type="text" id="last_name" placeholder="Last Name" class="form-control" required />
    </div>

    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="Email Address" class="form-control" required/>
    </div>      
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <button type="submit" id='btn_addRecord' class="btn btn-primary">Add Record</button>        
  </div>
  </form>

JavaScript code that makes it isn´t appear:

$(document).ready(function(){
    $('#btn_addRecord').on("click", function(event){
        //event.preventDefault();
        if ($("#form_insertar")[0].checkValidity()) {
            console.log('Validado el form: Inserta los datos con ajax!');
              //addRecord();
            return true;
        }
        if (!$("#form_insertar")[0].checkValidity()) {
            console.log('No validado el form: Devolvemos false y no hacemos nada. (LAMENTABLEMENTE HAY ALGO DESCONOCIDO POR LO QUE NO SE MUESTRAN LOS BUBBLES o ERRORES)');    
            return false;
        }
        //alert('test');
    });

});

Answer 5

Update (2022)

Just use reportValidity on the form that you want to validate and it will show you the error bubbles.

document.forms['myform'].reportValidity();