0Pricing
HTML Academy · Урок

Атрибут novalidate

Отключайте проверку браузером, если выполняете её самостоятельно

«Атрибут novalidate» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Ограничения браузерной проверки

Встроенная проверка HTML5 имеет ограничения:

  • Сообщения об ошибках зависят от браузера, и их трудно стилизовать
  • Проверка выполняется только при отправке, а не при потере фокуса или вводе
  • Сложные бизнес-правила (совпадение паролей, уникальность username) невозможно реализовать

Когда Вам нужен полный контроль, отключите встроенную проверку с помощью novalidate.

novalidate у элемента form

Добавление novalidate в form отключает всю встроенную проверку браузера:

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

Зачем использовать novalidate

Распространённые причины отключить браузерную проверку:

  • Пользовательская стилизация сообщений об ошибках в соответствии с Вашей дизайн-системой
  • Проверка в реальном времени (при потере фокуса или вводе, а не только при отправке)
  • Проверка нескольких полей (например, подтверждение пароля)
  • Отображение ошибок сервера после перенаправления
  • Сторонние библиотеки проверки (Zod, Yup, React Hook Form)

Шаблон пользовательской проверки

Создайте пользовательскую проверку с помощью novalidate:

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

formnovalidate у кнопки

Отключите проверку для определённой кнопки отправки, не добавляя novalidate ко всему form:

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

Стилизация пользовательских ошибок

Стилизация ошибок пользовательской проверки:

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

Доступные пользовательские ошибки

Сделайте сообщения пользовательских ошибок доступными:

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

Стратегии выбора времени проверки

Когда выполнять проверку с novalidate:

  • При отправке — самый простой вариант; проверяйте всё сразу
  • При потере фокуса — проверяйте каждое поле, когда пользователь покидает его
  • При вводе — проверка в реальном времени; обеспечивает лучший пользовательский опыт, но может казаться слишком навязчивой
  • Гибридный подход — проверяйте при потере фокуса, а ошибки удаляйте при вводе

Гибридный шаблон потери фокуса и ввода

Наиболее удобный для пользователя подход к проверке:

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate и серверная проверка

Всегда выполняйте также серверную проверку:

  • Проверка на стороне клиента предназначена для удобства пользователя
  • Проверка на стороне сервера предназначена для безопасности
  • Пользователи могут обойти проверку HTML, изменив запросы
  • Пользовательская проверка JS с novalidate должна повторять правила сервера

Библиотеки проверки

Популярные библиотеки проверки JavaScript, которые работают вместе с novalidate:

  • Zod — проверка схем с приоритетом TypeScript
  • Yup — проверка схем объектов
  • Valibot — лёгкая библиотека схем
  • React Hook Form — состояние form и проверка для React

Тестирование пользовательской проверки

Как тестировать пользовательскую проверку form:

  • Проверьте отправку пустого form (обязательные поля)
  • Проверьте недопустимый формат (неверный email, неправильный шаблон телефона)
  • Проверьте крайние случаи (только пробелы, Unicode, очень длинные строки)
  • Проверьте работу со средством чтения с экрана, чтобы убедиться в объявлении ошибок
  • Проверьте навигацию с клавиатуры между полями после отображения ошибки

Быстрая проверка

Что делает formnovalidate на кнопке?

Повторение: novalidate

Основные сведения о novalidate:

  • novalidate у form — отключает всю браузерную проверку
  • formnovalidate у кнопки — отключает проверку только для этой отправки
  • Используйте пользовательскую проверку для контроля пользовательского опыта и сложных правил
  • Всегда выполняйте серверную проверку — клиентскую проверку можно обойти
  • Объявляйте об ошибках доступным способом с помощью role="alert" и aria-invalid

Часто задаваемые вопросы

Урок «Атрибут novalidate» бесплатный?

Да — полный текст урока «Атрибут novalidate» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Атрибут novalidate»?

Отключайте проверку браузером, если выполняете её самостоятельно Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Атрибут novalidate»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. required pattern min max и maxlength
  2. Атрибут novalidate
  3. Основы Constraint Validation API
  4. Проверка HTML5 и JavaScript: компромиссы
← Назад к HTML Academy