Кратко
СкопированоАтрибут отключает нативную валидацию формы со стороны браузера.
Как пишется
Скопировано<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
.
💡 Эффект атрибута novalidate
схож с эффектом атрибута formnovalidate
, который можно применить к кнопке отправки формы — <button type
, <input type
или <input type
. Он тоже даёт браузеру указание закрыть глаза на валидацию.