Манипуляции с валидацией полей ввода через 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 к этим возможностям.