Упрощенная валидация форм с htmx

Валидация форм не должна означать написание гор JavaScript-кода. Если вы устали от ручного управления состоянием валидации, сообщениями об ошибках и обновлениями DOM, htmx предлагает освежающе простую альтернативу. Давайте рассмотрим, как реализовать как клиентскую, так и серверную валидацию с минимальным количеством кода и максимальным пользовательским опытом.

Клиентская валидация с htmx

Использование hx-validate для мгновенной обратной связи

Самый простой способ добавить клиентскую валидацию — использовать hx-validate="true" в вашей форме. Это указывает htmx проверять атрибуты HTML5-валидации перед отправкой любого запроса:

<form hx-post="/submit" hx-validate="true">
  <input type="email" name="email" required>
  <input type="text" name="username" 
         pattern="[a-zA-Z0-9]{3,20}" 
         title="3-20 alphanumeric characters">
  <button type="submit">Submit</button>
</form>

Этот подход использует встроенную валидацию браузера, обеспечивая мгновенную обратную связь без написания JavaScript.

Расширенные правила с расширением htmx-validation

Для более сложных сценариев валидации расширение htmx-validation предлагает пользовательские правила:

<script src="https://unpkg.com/htmx.org/dist/ext/validate.js"></script>

<form hx-post="/submit" hx-ext="validate">
  <input name="password" type="password" 
         data-validate='{"required": true, "minLength": 8}'>
  <input name="confirm" type="password" 
         data-validate='{"equalTo": "password"}'>
  <button type="submit">Submit</button>
</form>

Это расширение поддерживает пользовательские функции валидации, что делает его идеальным для бизнес-логики, которую не могут обработать атрибуты HTML5.

Серверная встроенная валидация

Валидация полей в реальном времени

Самый мощный паттерн валидации форм htmx сочетает серверную логику с встроенными обновлениями. Вот как валидировать отдельные поля во время ввода пользователем:

<form hx-post="/register">
  <div>
    <label for="email">Email</label>
    <input name="email" id="email" 
           hx-post="/validate/email" 
           hx-trigger="blur, keyup delay:500ms"
           hx-target="next .error"
           hx-swap="innerHTML">
    <span class="error"></span>
  </div>
  <button type="submit">Register</button>
</form>

Ваша серверная конечная точка возвращает обратную связь по валидации:

# Python/Flask example
@app.route('/validate/email', methods=['POST'])
def validate_email():
    email = request.form.get('email')
    if not email or '@' not in email:
        return '<span class="text-red">Invalid email format</span>'
    if email_exists_in_db(email):
        return '<span class="text-red">Email already taken</span>'
    return '<span class="text-green">✓ Available</span>'

Полная валидация формы с частичными ответами

Для полной валидации формы возвращайте всю форму с состояниями ошибок:

<form id="contact-form" 
      hx-post="/contact" 
      hx-target="this" 
      hx-swap="outerHTML">
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

Сервер возвращает форму с классами ошибок и сообщениями при неудачной валидации, или сообщение об успехе при успешной валидации.

Распространенные ошибки и решения

Атрибуты кнопки против атрибутов формы

Частая ошибка — размещение hx-post на кнопке отправки вместо формы:

<!-- Неправильно: валидация не сработает -->
<form hx-validate="true">
  <button hx-post="/submit">Submit</button>
</form>

<!-- Правильно: валидация работает -->
<form hx-post="/submit" hx-validate="true">
  <button type="submit">Submit</button>
</form>

Обработка событий валидации

htmx предоставляет события для точного контроля над процессом валидации:

// Перехват перед валидацией
document.body.addEventListener('htmx:configRequest', function(evt) {
  if (evt.target.matches('[data-confirm]')) {
    evt.preventDefault()
    if (confirm(evt.target.dataset.confirm)) {
      evt.detail.issueRequest()
    }
  }
})

// Обработка ошибок серверной валидации
document.body.addEventListener('htmx:responseError', function(evt) {
  if (evt.detail.xhr.status === 422) {
    // Отображение ошибок валидации с сервера
    const errors = JSON.parse(evt.detail.xhr.response)
    showValidationErrors(errors)
  }
})

Лучшие практики для доступной валидации

Всегда включайте соответствующие ARIA-атрибуты для программ чтения с экрана:

<input name="email" 
       aria-invalid="true" 
       aria-describedby="email-error">
<span id="email-error" role="alert">
  Please enter a valid email
</span>

Используйте hx-trigger="blur" вместо keyup для полей, где постоянная валидация может раздражать, например, для паролей. Для поиска или проверки доступности имени пользователя keyup delay:500ms обеспечивает хороший баланс.

Заключение

Валидация форм htmx блестяще справляется с задачей, сохраняя логику валидации там, где ей место — на сервере — при этом обеспечивая плавный, отзывчивый опыт, которого ожидают пользователи. Независимо от того, выберете ли вы клиентскую валидацию для мгновенной обратной связи или серверную валидацию для сложных правил, htmx сокращает количество JavaScript, который вы пишете, одновременно улучшая пользовательский опыт. Начните с hx-validate="true" для базовых потребностей, затем постепенно добавляйте встроенную валидацию для отполированной, готовой к продакшену формы.

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

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.