Кастомизация сообщений валидации формы HTML5: JS решение

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

Для персонализации оповещений о валидации используйте метод setCustomValidity в сочетании с атрибутом required и обработчиками событий oninvalid и oninput. Вот как это выглядит на практике:

<input required oninvalid="this.setCustomValidity('Введите требуемые данные')" oninput="this.setCustomValidity('')">

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

Реализация различных уведомлений валидации

Чтобы настроить разнообразные сообщения для каждого отдельного случая, используйте функцию InvalidInputHelper:

function InvalidInputHelper(inputElement, options) {
  inputElement.oninvalid = function(e) {
    let message = "";
    if (!this.value) {
      message = options.emptyMessage;
    } else if (!this.validity.valid) {
      message = options.invalidMessage;
    }
    this.setCustomValidity(message);
  };
  
  inputElement.oninput = function(e) {
    this.setCustomValidity('');
  };
}

Теперь вы можете задействовать эту функцию для установки нужных сообщений:

InvalidInputHelper(document.getElementById('myInput'), {
  emptyMessage: "Похоже, вы забыли внести данные!",
  invalidMessage: "Ой, здесь кажется ошибка."
});

Детализация ошибок валидации

Чтобы ясно и точно указать пользователям на ошибку, используйте атрибут pattern и метод setCustomValidity, как показано ниже:

<input 
  type="email" 
  required
  oninvalid="this.setCustomValidity(this.value ? 'Пожалуйста, проверьте корректность адреса электронной почты.' : 'Нам нужен ваш email!')"
  oninput="this.setCustomValidity('')"
  pattern="[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-z]{3}"
>

Немедленная обратная связь

Сделайте вашу форму более интерактивной с помощью немедленных сообщений об ошибках:

<input
  type="text"
  required
  oninvalid="this.setCustomValidity('Есть определенные правила для выбора имен пользователей, обратите на них внимание!')"
  oninput="this.setCustomValidity('')"
  pattern="^[a-zA-Z0-9_.-]*$"
>

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

Чтобы сделать код более модульным и избежать повторения, используйте атрибуты данных для хранения уведомлений о валидации:

<input
  type="text"
  required
  data-empty-message="Это поле нуобходимо заполнить"
  data-invalid-message="Недопустимое имя пользователя"
  pattern="^[a-zA-Z0-9_.-]*$"
>

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

document.querySelectorAll('input[required]').forEach(function(input) {
  input.oninvalid = function() {
    var message = this.value ? this.dataset.invalidMessage : this.dataset.emptyMessage;
    this.setCustomValidity(message);
  };
  input.oninput = function() {
    this.setCustomValidity('');
  };
});

Совместимость с браузерами

Приведенный выше способ настроек совместим со всеми основными браузерами, включая Chrome, Internet Explorer, Edge, Firefox и Opera.

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

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

<input type="text" required oninvalid="this.setCustomValidity('Ответьте, пожалуйста, на вопрос')" />

Учет доступности

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

Проверка на стороне сервера

Не стоит забывать, что валидация на клиентской стороне улучшает UX, в то время как проверка на сервере необходима для сохранения целостности данных и обеспечения безопасности. Серверная проверка дополняет клиентскую, но не заменяет ее.