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

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

Для конфигурации сообщений об ошибках в HTML-формах применяется метод setCustomValidity с настройкой обработчиков событий для элемента input:

let emailInput = document.getElementById('myEmail');

emailInput.addEventListener('invalid', () => {
    emailInput.setCustomValidity('Пользовательское сообщение об ошибке для поля email');
});

emailInput.addEventListener('input', () => {
emailInput.setCustomValidity('');
});

Таким образом, к полю email привязываются обработчики событий, которые определяют пользовательское сообщение при неверном вводе и стирают его при новом вводе значения.

Использование атрибутов HTML5 для валидации

HTML5 предлагает атрибуты pattern и required, с помощью которых можно установить требования к формату вводимых данных и обозначить поля как обязательные для заполнения.

<input type="text" id="phone" pattern="[0-9]{10}" title="Пожалуйста, используйте только цифры. К сожалению, связь с Хогвартсом недоступна." required>

Если введённые данные не совпадают с заданным шаблоном, пользователь увидит подсказку, указанную в атрибуте title.

Управление множественными сообщениями об ошибках

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

function errorMessageGalore(inputElement) {
    if(inputElement.validity.patternMismatch) {
        inputElement.setCustomValidity("Ошибка: ввод не соответствует шаблону.");
    } else if(inputElement.validity.valueMissing) {
        inputElement.setCustomValidity("Ошибка: значение не указано.");
    } else {
        inputElement.setCustomValidity("");
    }
}

Использование JavaScript-функций для управления ошибками значительно упрощает эту задачу!

Обеспечение обратной связи в реальном времени с помощью обработчиков событий

С помощью обработчиков oninput и onchange можно реализовать непосредственную очистку ошибок, что существенно улучшает удобство работы с формами.

emailInput.oninput = () => {
    emailInput.setCustomValidity('');
};

Обеспечение работы решения в различных браузерах

Проверяйте работоспособность своего решения в разных браузерах, чтобы избежать ситуации, когда "на моей машине всё работает".

Эффективное управление сообщениями об ошибках

Сохраняйте сообщения об ошибках в отдельных файлах для поддержки принципов DRY (Don't Repeat Yourself) и интернационализации.

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

Видимо представим процесс обработки ошибок валидации как театральную постановку:

Сцена (🎭): HTML-форма с валидацией
Сценарий (📜): Стандартные сообщения об ошибках
Актёры (🎩): Элементы формы (например, <input>, <select>)

Занавес поднимается:

// Режиссёр переписывает сценарий.
document.getElementById('email').oninvalid = function(event) {
    event.target.setCustomValidity('🌟 Пожалуйста, введите корректный email!');
};

Перед и после:

До: [📄 "Пожалуйста, заполните это поле."]
После:  [🌟 "Пожалуйста, введите корректный email!"]

👉 Видите разницу? Выбирая себе роль режиссёра, вы можете переписать сценарий так, чтобы он лучше соответствовал вашей форме!

Применение jQuery для сложной валидации форм

jQuery предоставляет функции для установки индивидуальных сообщений об ошибках.

$('form').validate({
    rules: {
        myEmail: {
            required: true,
            email: true
        }
    },
    messages: {
        myEmail: {
            required: "Ваш email необходим для связи.",
            email: "Формат email должен быть следующим: me@domain.com"
        }
    }
});

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

1. Валидация ограничений – HTML | MDN — Описание настройки сообщений об ошибках при валидации форм HTML5.
2. Валидация форм на стороне клиента | MDN — Углубленное пособие по клиентской валидации форм.
3. LukeW | Web Form Design: Filling in the Blanks — Множество полезных сведений о дизайне форм.
4. Объявление языка в HTML — Руководство по объявлению языка документа для интернационализации.
5. validate.js — Мощная библиотека для валидации форм на JavaScript.