Наша группа в телеграмм для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Проверка корректности поля на основе html5+javascript

Свойство WillValidate определяет, нужно ли этому узлу ограничение проверки. Для элемента submittable будет установлено значение ?true если узлу по какой то причине запретить ограничение проверки, пишем атрибут disabled.
<div id="one"></div>
<input id="two" type="text" />
<input id="three" type="text" disabled="disabled" />
<script>
    document.getElementById('one').willValidate; //false
    document.getElementById('two').willValidate; //true
    document.getElementById('three').willValidate; //false
</script>

Validity свойства узла DOM возвращает объект ValidityState

Validity={
    customError: true, // если для сообщений пользователя был установлен вызов setCustomValidity()
    patternMismatch: true, // если узел value не соответствует атрибутам pattern
    rangeOverflow: tue, // если узел value превышает атрибут  max
    rangeUnderflow: true, // если узел value имеет значение меньше чем атрибут  min
    stepMismatch: true, // если узел не value имеет значение атрибута step.
    tooLong: true,  // если узел value превышает атрибут maxlength.
    tooShort: true, // если значение меньше допустимого минимума minlength.
    typeMismatch: true, // если в узле value каждый его атрибут type неправильный.
    valueMissing: true, // если узел имеет обязательный атрибут required, но узел value пуст.
    valid: true, // если все действия условий, перечисленных выше, являются false.
    badInput: true, // если запись не может быть преобразована в значение;

ValidationMessage свойства узла DOM содержит сообщение, которое браузер отображает пользователю, когда действия узла не удается проверить. Браузер предоставляет по умолчанию локализованные сообщения для этого свойства. Если узел DOM не является кандидатом на ограничение проверки или, если узел содержит действительные данные ValidationMessage будет установлен в пустую строку.

Метод checkValidity() для элементов узла (например, input, select, textarea) возвращает true, если элемент содержит достоверные данные. Форма узлов возвращает true, если все формы, содержат допустимые данные. При неверных значениях вызывается обработчик invalid каждого неверно узла. Назначить его можно с помощью:

document.getElementById('input-1').addEventListener('invalid', function() {
    //...
    }, false);

Метод checkValidity() может быть выполнен на любом отдельном поле или формы в целом, вернув true или false - соответствует шаблону или нет.

Метод SetCustomValidity изменяет свойства ValidationMessage, а также позволяет добавлять пользовательские правила проверки. Потому что установка ValidationMessage проходящей с пустой строкой отмечает поля действительными и попутно любая другая строка отмечается недействительной.

if (document.getElementById('password1').value != document.getElementById('password2').value) {
document.getElementById('password1').setCustomValidity('Passwords must match.');
} else {
document.getElementById('password1').setCustomValidity('');
}

.

Популярное:


Содержание: