Как предоставить пользовательские сообщения об ошибках валидации для валидаций HTML?

Question

Когда я использую проверку HTML по умолчанию, отображаются сообщения об ошибках по умолчанию, которые я не хочу показывать своим клиентам.Мне нужно настроить сообщение и дать разные виды массажа для каждой проверки, такие как min, max, type и require.Например:

Поле обязательно для заполнения, значение не соответствует

См. Традиционный HTML-код:

<input type="text" required>

Я хочу что-то вродеэто:

<input type="text" validation="required|my_message,min:5|my_message">

Answer 1

Попробуйте этот, он лучше и проверен: HTML:

<form id="myform">
<input id="email" 
       oninvalid="InvalidMsg(this);" 
       oninput="InvalidMsg(this);"
       name="email"  
       type="email" 
       required="required" />
<input type="submit" />

JAVASCRIPT:

function InvalidMsg(textbox) {
if (textbox.value === '') {
    textbox.setCustomValidity('Required email address');
} else if (textbox.validity.typeMismatch){
    textbox.setCustomValidity('please enter a valid email address');
} else {
   textbox.setCustomValidity('');
}

return true;

}

Демонстрация:

http://jsfiddle.net/patelriki13/Sqq8e/

Answer 2

вы можете использовать setCustomValidity

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

Answer 3

Вполне возможно с пользовательскими библиотеками в jQuery, которые я бы посоветовал - https://github.com/aslamanver/abvalidate

Пользовательское сообщение - Проверка формы jQuery - abValidate.js

ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name"

Используйте эту библиотеку, добавив этиCDNs

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- abValidate Library -->
<script type="text/javascript" src="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.min.js">
<link rel="stylesheet" href="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.css">

Инициализация библиотеки

$(document).ready(function () {
    //.ab-form is your form class
    $(".ab-form").abValidate();
});

Итак, теперь вы можете использовать свою пользовательскую проверку с использованием библиотеки jQuery abValidate

<form class="ab-form" action="your_action_url">

   <!-- Input and error message should be in a div class -->
   <div class="my-form-group">
        <input type="text" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name" class="ab-validation-i" />
        <div class="error"></div>
    </div><br>

    <div class="my-form-group">
        <input type="submit" name="submit" value="Submit">
    </div>

</form>