Манипуляции с валидацией полей ввода через HTML5 и Javascript

Быстрый ответ

Воспользуйтесь методом setCustomValidity() объекта input в JavaScript, чтобы установить полю невалидное состояние. С помощью этого метода возможно сообщить об ошибке, если введённое в поле значение не соответствует установленным требованиям, либо же очистить сообщение об ошибке, тем самым указав на корректность данных.

document.querySelector('#myInput').setCustomValidity('Требуется ввести как минимум 4 символа');

Случай, когда валидность поля динамически изменяется в зависимости от его содержимого, программный код будет выглядеть следующим образом:

let input = document.querySelector('#myInput');
input.oninput = () => input.setCustomValidity(input.value.length >= 4 ? '' : 'Требуется ввести как минимум 4 символа');

В приведенном выше коде, если введено менее четырех символов, то статус поля изменится на невалидное, и, как только будет достигнута минимальная требуемая длина, он станет валидным.

Подробности

Безопасность: клиентская валидация данных – это не все

Клиентская валидация с помощью JavaScript довольно удобна, однако она не обеспечивает полной безопасности. Важно всегда проверять данные также и на стороне сервера, чтобы предотвратить возможные манипуляции.

Подробнее об этом расскажет наш спикер на видео

Переопределение стандартной валидации HTML

Если стандартные методы HTML не отвечают вашим требованиям, вы можете задействовать собственный механизм валидации, используя обработчик submit:

document.querySelector('form').onsubmit = function(event) {
    if (!validateMyForm()) {
        event.preventDefault();
    }
};

В этом примере, функция validateMyForm() применяет индивидуальные правила валидации и, в зависимости от результата, либо позволяет, либо блокирует отправку формы.

Визуальная обратная связь для невалидных полей

Обеспечьте визуальную обратную связь, если обнаружена ошибка в поле ввода. В зависимости от результатов проверки, добавляйте или удаляйте соответствующие CSS-классы:

input.oninput = () => {
    let msg = input.value.length >= 4 ? '' : 'Требуется ввести как минимум 4 символа';
    input.setCustomValidity(msg);
    input.className = input.validity.valid ? 'valid' : 'invalid';
};

В данном коде CSS-класс поля изменяется на valid или invalid в соответствии с результатом валидации, что позволяет применить определенные стили отображения.

Регулярные выражения: точные инструменты валидации

Регулярные выражения – это мощные инструменты валидации данных в JavaScript, которые можно использовать для проверки сложных условий, например, для валидации почтовых адресов или пользовательских форматов.

Оптимизация процесса ввода данных пользователями

Следуйте принципу KISS — "не усложняй". Фокусируйтесь только на той ключевой информации, которую вам нужно получить от пользователей, чтобы найти баланс между безопасностью и удобством использования.

В мире jQuery

В jQuery возможно использовать селектор $ для мгновенной валидации:

let $input = $('#myInput');
$input.on('input', () => {
    $input[0].setCustomValidity($input.val().length >= 4 ? '' : 'Требуется ввести как минимум 4 символа');
});

// Отключение стандартной валидации HTML5. Извини, HTML, но тебе здесь не место.
$('form').attr('novalidate', 'novalidate');

Расширьте ваш арсенал инструментов для валидации данных

Ищете универсальные решения? Обратите внимание на различные плагины. Библиотеки вроде jq-idealforms предлагают готовые для использования сценарии проверки данных для разных браузеров и устройств.

Визуализация

Визуальное представление валидности поля

Отмечая поле как невалидное, вы, как бы, делаете пометку красным карандашом на документе:

[ ✅ ] <- Ваше поле ввода в валидном состоянии!

Позвольте вашему JavaScript делать то же самое:

document.querySelector('input').setCustomValidity('Ошибка ввода');

Теперь поле отображается как невалидное:

[ ❌ ] <- Вот ваше поле ввода в невалидном состоянии!

Сообщение валидации выполняет функцию подсказки, указывая на причину ошибки.

Полезные материалы

1. Constraint validation – HTML: HyperText Markup Language | MDN — Подробное руководство по использованию API валидации ограничений в JavaScript.
2. Form Validation Part 1: Constraint Validation in HTML | CSS-Tricks — Полезная информация о валидации ограничений в HTML и настройке сообщений для пользователя.
3. How to force an HTML form to validate without submitting it via jQuery – Stack Overflow — Советы от сообщества разработчиков о программной валидации без отправки формы.
4. HTML5 Forms: JavaScript and the Constraint Validation API — SitePoint — Обзор валидации форм в HTML5 и API для валидации ограничений в JavaScript.
5. More capable form controls | Articles | web.dev — Статьи о улучшении элементов форм и применении передовых техник валидации.
6. GitHub – Modernizr/Modernizr: Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. — Библиотека Modernizr определяет поддержку HTML5 и CSS3 в браузере, давая возможность адаптировать JavaScript к этим возможностям.