Атрибут formnovalidate тега <button>
Описание
Атрибут formnovalidate отключает встроенную валидацию HTML5 формы при отправке через конкретную кнопку. Это позволяет отправить форму даже если некоторые поля не проходят проверку.
<form>
<input type="email" name="user_email" required>
<button type="submit">Отправить с проверкой</button>
<button type="submit" formnovalidate>Отправить без проверки</button>
</form>
Основные характеристики:
| Аспект | Поведение | Примечание |
|---|---|---|
| Валидация | Полностью отключает проверку | Даже для required-полей |
| Тип кнопки | Только для type="submit" | Не работает с обычными кнопками |
| Совместимость | Работает во всех современных браузерах | HTML5-спецификация |
Практический пример:
<form id="user-form">
<input type="text" name="username" required minlength="3">
<input type="email" name="email" required>
<button type="submit">Полная проверка</button>
<button type="submit" formnovalidate>Пропустить проверку</button>
</form>
Важные замечания:
- Не заменяет серверную валидацию - всегда проверяйте данные на сервере
- Полезен для кнопок "Сохранить черновик" или "Продолжить позже"
- Можно использовать для отладки форм
- Не влияет на JavaScript-валидацию
Пример с пользовательской валидацией:
<form>
<input type="text" id="phone" pattern="\d{10}">
<button type="submit" formnovalidate onclick="return customValidate()">
Альтернативная проверка
</button>
</form>
<script>
function customValidate() {
const phone = document.getElementById('phone');
if(phone.value.length !== 10) {
alert('Номер должен содержать 10 цифр');
return false;
}
return true;
}
</script>
Примечание: Хотя formnovalidate полезен в специфичных сценариях, не злоупотребляйте им - встроенная валидация форм создана для улучшения пользовательского опыта.