Атрибут novalidate

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

        
          
          <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">. Он тоже даёт браузеру указание закрыть глаза на валидацию.