Показать ошибки в JavaScript в форме HTML5

У меня есть форма HTML5 с обязательными полями:

<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>

Кроме того, у меня есть следующий код jQuery:

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

Я хотел бы заставить показывать ошибки HTML5 в строке //show errors.

Ответ 1

Если вы хотите показать пузыри проверки, сначала необходимо отправить форму. Измените тип button на submit и прослушайте событие submit.

Также обратите внимание, что в jQuery нет метода checkValidity, сначала вы должны получить необработанный элемент DOM:

// 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/

Ответ 2

Как насчет добавления поля подсказки внутри формы и изменения ее значения HTML в зависимости от ошибки?

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>

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

Конечно, вы можете использовать этот div, чтобы вызывать как успешные, так и сообщения об ошибках. Чтобы выполнить его, вы можете создать правильные стили CSS i.e.

CSS

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

и назначьте соответствующий класс в зависимости от ваших потребностей (см. фрагмент выше).

Ответ 3

Просто добавьте div для сообщений об ошибках...

<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

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

Ответ 4

У меня та же проблема, html5 пузыри не появляются, когда вы захватываете событие on.click и что-то с ним делаете, например, чтобы продолжить с ajax после проверки html5.

Я заметил, что если в захвате события click есть какой-либо код (простое предупреждение), то не отображаются ошибки проверки html5, соответствующие каждому полю (пузырькам)

Предполагается, что проверка существующего html5 работает (что это не потеряно и работает правильно) и что больше, чем это, может захватить событие click и продолжить выполнение операций из JavaScript

HTML5 требует ввода, где пузырь должен появиться!

  <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-код, из-за которого он не появляется:

$(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');
    });

});