Атрибут novalidate тега <form> — без перевірки полів
Атрибут novalidate скасовує вбудовану перевірку даних у формі, що ввів користувач, на коректність.
Перевірка здійснюється браузером автоматично для поля <input type="email">, <input type="url"> чи інших, при відправленні форми на сервер, а також при наявності атрибута pattern або required.
Загальний опис
автор: NagarD
- Нотатка
-
автор: с3сnovalidateє логічним атрибутом.
Синтаксис
<form novalidate>
...
</form>Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 10 | 4 | 10.1 | 15 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 18 | 4 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання HTML атрибута novalidate теґа <form>
HTML
<p>Приклад використанням атрибуту 'novalidate'</p>
<hr>
<form novalidate>
<p>З використанням novalidate </p>
<p><input required placeholder="Ім'я"></p>
<p><input type="email" required placeholder="Ваш email"></p>
<p><input type="url" required placeholder="Сайт"></p>
<p><input type="submit"></p>
</form>
<form>
<p>Без використанням novalidate</p>
<p><input required placeholder="Ім'я"></p>
<p><input type="email" required placeholder="Ваш email"></p>
<p><input type="url" required placeholder="Сайт"></p>
<p><input type="submit"></p>
</form>CSS
form {
width:400px;
float:left;
}Дві однакові форми з обов'язковим полем пошти. Порожнє поле червоне в обох — стан :invalid від novalidate не залежить. Різниця з'явиться при натисканні кнопки: ліва форма покаже підказку браузера й зупиниться, права з novalidate спробує відправитися як є.
HTML
<form>
<p>без novalidate</p>
<input type="email" required placeholder="пошта">
<button type="submit">Надіслати</button>
</form>
<form novalidate>
<p>з novalidate</p>
<input type="email" required placeholder="пошта">
<button type="submit">Надіслати</button>
</form>CSS
form {
display: inline-block;
vertical-align: top;
margin: 0 16px 0 0;
padding: 10px;
border: 1px solid #ccc;
font: 14px sans-serif;
}
p { margin: 0 0 8px; color: #444; }
input {
padding: 6px;
border: 2px solid #888;
}
input:invalid {
border-color: #c0392b;
background: #fdecea;
}
input:valid {
border-color: #2e7d32;
background: #eaf7ea;
}
button {
margin-top: 8px;
padding: 6px 12px;
}Різниця між HTML 4.01 та HTML5
Атрибут novalidate зʼявився тільки в HTML5.
Різниця між XHTML та HTML
У XHTML, мінімізований запис атрибутів заборонений, тому атрибут novalidate повинен бути визначений як <form novalidate="novalidate">.
Коментарі
Коментарів ще немає — будьте першим!