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

Question

У меня есть форма 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 in //show errors линия.

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

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

JS

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

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

CSS

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

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

Answer 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"); 
} 
});