Атрибут novalidate тега <form>

Описание

Атрибут novalidate отключает встроенную браузерную валидацию формы. Это булевый атрибут - его наличие (без значения) отключает валидацию, отсутствие - оставляет валидацию включенной.

Пример использования:
<form novalidate> <input type="email" name="user-email" required> <button type="submit">Отправить без валидации</button> </form>

Сравнение с валидацией:

Состояние Поведение Как задать
Валидация включена Браузер проверяет поля перед отправкой <form> (без атрибута)
Валидация отключена Форма отправляется без проверки <form novalidate>

Практическое применение:

<form id="my-form" novalidate> <input type="email" name="email" placeholder="Email" required> <button type="submit">Отправить</button> </form> <script> document.getElementById('my-form').addEventListener('submit', function(e) { // Кастомная валидация вместо браузерной if(!isValidEmail(this.elements.email.value)) { e.preventDefault(); alert('Пожалуйста, введите корректный email'); } }); function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); } </script>

Когда использовать:

  • Для кастомной JavaScript-валидации
  • При нестандартных типах данных
  • Для сложных условий проверки
  • Когда нужно единообразное поведение во всех браузерах

Рекомендации:

  • Всегда реализуйте свою валидацию при использовании novalidate
  • Сообщайте пользователю об ошибках понятным образом
  • Для важных полей дублируйте проверку на сервере
  • Можно комбинировать с атрибутами полей (required, pattern)

Пример комбинированного подхода:

<form novalidate> <input type="text" name="username" required pattern="[A-Za-z]{3,}" title="Не менее 3 латинских букв"> <button type="submit">Зарегистрироваться</button> </form> <!-- Атрибуты валидации остаются как подсказки для кастомной проверки -->

Особенности браузеров:

  • В Safari может потребоваться явное указание novalidate="novalidate"
  • Некоторые браузеры всё равно показывают базовые подсказки
  • Не влияет на CSS-псевдоклассы :valid/:invalid

Примечание: Хотя novalidate отключает встроенную валидацию, он не отменяет семантику HTML5-атрибутов валидации (required, pattern и др.), которые всё равно можно использовать для кастомной проверки.