Атрибут novalidate

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Атрибут отключает нативную валидацию формы со стороны браузера.

Как пишется

Секция статьи "Как пишется"
        
          
          <form novalidate>...</form>
          <form novalidate>...</form>

        
        
          
        
      

Атрибут novalidate пишется внутри открывающего тега формы, без каких-либо значений.

Пример

Секция статьи "Пример"

Создадим форму для отзывов о сервисе. Обязательными для заполнения будут поля почты для обратной связи, комментария и согласия на обработку персональных данных:

        
          
          <form novalidate>  <label class="form-row">    <span>Имя</span>    <input type="text" name="name" placeholder="Микки">  </label>  <label class="form-row required">    <span>Почта</span>    <input type="email" name="email" placeholder="email@example.com" required>  </label>  <label class="form-row required">    <span>Комментарий</span>    <textarea name="comment" placeholder="Мне всё понравилось!" required></textarea>  </label>  <label class="form-row">    <input type="checkbox" name="agree" required>    Я согласен с политикой обработки персональных данных  </label>  <div class="form-toolbar">    <button type="submit">Отправить</button>  </div></form>
          <form novalidate>
  <label class="form-row">
    <span>Имя</span>
    <input type="text" name="name" placeholder="Микки">
  </label>
  <label class="form-row required">
    <span>Почта</span>
    <input type="email" name="email" placeholder="email@example.com" required>
  </label>
  <label class="form-row required">
    <span>Комментарий</span>
    <textarea name="comment" placeholder="Мне всё понравилось!" required></textarea>
  </label>
  <label class="form-row">
    <input type="checkbox" name="agree" required>
    Я согласен с политикой обработки персональных данных
  </label>
  <div class="form-toolbar">
    <button type="submit">Отправить</button>
  </div>
</form>

        
        
          
        
      

Результат

Секция статьи "Результат"
Открыть демо в новой вкладке

Хоть некоторые поля являются обязательными к заполнению, и даже есть поле с типом email, вы всё равно сможете отправить пустую форму. Но как только вы уберёте атрибут novalidate с помощью кнопки «Вернуть валидацию», браузер не даст отправить форму, пока все поля не будут заполнены верно.

Как это понять

Секция статьи "Как это понять"

Каждое поле формы, которое заполняет пользователь, может иметь чётко указанный тип и правила ввода. В момент, когда пользователь отправляет форму, браузер проверяет правильность заполненных данных, блокируя отправку в случае ошибки и показывая подсказку там, где она была допущена.

Например, поля с атрибутом required должны быть обязательно заполнены, и браузер укажет, если пользователь вдруг какое-нибудь из них пропустил.

Атрибут novalidate говорит браузеру не проверять поля и не препятствовать отправке формы, так как иногда подобное поведение бывает нежелательным. К примеру, форма проверяется при помощи JavaScript, и нужно избежать конфликтов с браузерной валидацией. В том числе, и убрать всплывающие подсказки, чтобы показать вместо них свои, кастомные.

При помощи атрибута novalidate браузер можно просто попросить не вмешиваться — например, вместо того чтобы убирать атрибуты required с полей или даже заменять <form> на <div>. Этим атрибут позволяет сохранить семантически верный и доступный код.

Подсказки

Секция статьи "Подсказки"

💡 Проверка введённых данных происходит только при попытке отправить форму.

💡 Независимо от наличия атрибута novalidate, к полям формы (как и к самой форме и её филдсетам) в любом случае будут применяться псевдоклассы :invalid/:valid.

💡 Эффект атрибута novalidate схож с эффектом атрибута formnovalidate, который можно применить к кнопке отправки формы — <button type="submit">, <input type="submit"> или <input type="image">. Он тоже даёт браузеру указание закрыть глаза на валидацию.