Принудительная валидация формы HTML через jQuery без отправки

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

Овладеть валидацией HTML5 без отправки формы можно, используя метод checkValidity() в jQuery:

$('#validateBtn').click(function() {
  if ($('form')[0].checkValidity()) {
    alert('Форма валидна! Пусть это станет вашей маленькой победой!');
  } else {
    // Запускаем встроенную браузерную валидацию
    $('form')[0].reportValidity();
  }
});

При нажатии на #validateBtn происходит проверка с помощью checkValidity() и, при необходимости, отображение ошибок с помощью reportValidity().

Шаг вперёд: продвинутые техники валидации

Погрузимся в настройку валидации и избежим ненужных отправок формы.

Валидация отдельного поля

Для проверки конкретного поля применяйте следующий код:

$('#myField').on('input', function() {
  if (this.checkValidity()) {
    $(this).addClass('valid');  // Отметка о валидности!
  } else {
    $(this).addClass('invalid');  // Отметка о невалидности.
  }
});

Последовательное добавление классов позволяет визуализировать результат валидации каждого поля.

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

Остановите отправку!

Не дайте невалидной форме отправиться на сервер:

$('form').on('submit', function(event) {
  if (!this.checkValidity()) {
    event.preventDefault();   // "Стоп, машина!"
    this.reportValidity();    // "Отправка данных отклонена!"
  } else {
    // Можно отправлять AJAX-запрос
    var formData = $(this).serialize();
    sendDataToServer(formData);  // "Данные отправлены!"
  }
});

В этом коде event.preventDefault() выступает как страж, предотвращающий отправку невалидных форм.

AJAX: валидация для профессионалов

Если вы работаете с AJAX, применяйте валидацию данных перед их отправкой:

function sendDataToServer(data) {
  $.ajax({
    url: 'submit_form.php',
    method: 'POST',
    data: data,
    success: function(response) {
      // Здесь поднимаем стакан за успех
    },
    error: function() {
      // Здесь сознаем неудачу
    }
  });
}

Проведение предварительной валидации помогает избежать отправки некорректных данных, экономя время.

Валидация HTML5 до предела

В валидации HTML5 есть множество хитростей, которые улучшают пользовательский опыт.

Индивидуальные сообщения об ошибках

Настраивайте собственные сообщения для указания на ошибки валидации:

document.querySelector('#myField').oninvalid = function(event) {
  event.target.setCustomValidity('Неправильный ввод! Попробуйте другие варианты.');
};

Динамическое изменение состояния валидности

Управляйте состоянием валидности полей формы в любое время:

$('form').on('input change', function() {
  var isValid = this.checkValidity();
  // Привязываем доступность кнопки 'Отправить' к статусу валидности формы
  $('#submitBtn').prop('disabled', !isValid);
});

В результате, кнопка отправки будет отслеживать валидность формы, словно ее тень.

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

Уделяйте внимание совместимости с браузерами. Если валидация HTML5 не поддерживается, используйте альтернативные решения или полифилы.

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

Визуализируйте каждое правило валидации как препятствие на треке:

Эстафета валидации формы:
🏃‍♂️💨 Старт | 🚧 Обязательное поле | 🌀 Проверка формата | 🧮 Валидация числа | 🏁 Финиш!

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

$('form').submit(function(event) {
    event.preventDefault();       // 🛑 Стоп, форма
    if (this.checkValidity()) {   // 👀 Осмотр препятствий
        alert("Отлично!");        // 🏆 Мы готовы к отправке!
    }
});

Таким образом, вы можем осмотреть все препятствия на треке перед стартом. Подвиги ждут вас!

Где в густой траве прячется валидатор

Давайте ознакомимся с основными принципами валидации.

Следуем за событиями jQuery

Используйте события jQuery, такие как submit, input, change, для контроля процессов валидации в реальном времени.

HTML5 и ваш персональный JavaScript

Создавайте эффективные решения, сочетая ваши собственные методы JavaScript с функционалом валидации HTML5.

Вызовы к AJAX после проверки

Не спешите обращаться к AJAX, пока форма не пройдет валидацию.

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

Следующие ссылки помогут вам более глубоко изучить валидацию HTML5:

1. Валидация форм на стороне клиента – MDN — сведения о поддержке браузерами.
2. Ограничительная валидация – MDN — обзор API для валидации HTML5.
3. Как заставить форму HTML провериться без отправки – Stack Overflow — практические советы и примеры кода.
4. HTMLInputElement: метод checkValidity() – MDN — руководство по использованию метода checkValidity().
5. HTMLFormElement: метод reportValidity() – MDN — руководство по использованию reportValidity().
6. Основы событий в jQuery | jQuery Learning Center — руководство по событиям jQuery.
7. Как настроить валидацию форм в jQuery – SitePoint — руководство по базовой валидации форм с помощью jQuery.