Validation de formulaires simplifiée avec htmx

La validation de formulaires ne nécessite pas d’écrire des montagnes de JavaScript. Si vous en avez assez de gérer manuellement l’état de validation, les messages d’erreur et les mises à jour du DOM, htmx offre une alternative d’une simplicité rafraîchissante. Explorons comment implémenter à la fois la validation côté client et côté serveur avec un minimum de code et une expérience utilisateur maximale.

Validation côté client avec htmx

Utilisation de hx-validate pour un retour instantané

La façon la plus simple d’ajouter une validation côté client est d’utiliser hx-validate="true" sur votre formulaire. Cela indique à htmx de vérifier les attributs de validation HTML5 avant d’envoyer toute requête :

<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>

Cette approche exploite la validation intégrée du navigateur, fournissant un retour instantané sans écrire de JavaScript.

Règles avancées avec l’extension htmx-validation

Pour des scénarios de validation plus complexes, l’extension htmx-validation offre des règles personnalisées :

<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>

Cette extension prend en charge les fonctions de validation personnalisées, ce qui la rend parfaite pour la logique métier que les attributs HTML5 ne peuvent pas gérer.

Validation inline côté serveur

Validation de champ en temps réel

Le modèle de validation de formulaire htmx le plus puissant combine la logique côté serveur avec les mises à jour inline. Voici comment valider des champs individuels pendant que les utilisateurs tapent :

<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>

Votre endpoint serveur retourne un retour de validation :

# 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>'

Validation complète de formulaire avec réponses partielles

Pour une validation complète de formulaire, retournez l’ensemble du formulaire avec les états d’erreur :

<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>

Le serveur retourne le formulaire avec les classes d’erreur et les messages lorsque la validation échoue, ou un message de succès lorsqu’elle réussit.

Pièges courants et solutions

Attributs de bouton vs formulaire

Une erreur fréquente consiste à placer hx-post sur le bouton de soumission au lieu du formulaire :

<!-- Incorrect : la validation ne se déclenchera pas -->
<form hx-validate="true">
  <button hx-post="/submit">Submit</button>
</form>

<!-- Correct : la validation fonctionne -->
<form hx-post="/submit" hx-validate="true">
  <button type="submit">Submit</button>
</form>

Gestion des événements de validation

htmx fournit des événements pour un contrôle précis du flux de validation :

// Intercepter avant la validation
document.body.addEventListener('htmx:configRequest', function(evt) {
  if (evt.target.matches('[data-confirm]')) {
    evt.preventDefault()
    if (confirm(evt.target.dataset.confirm)) {
      evt.detail.issueRequest()
    }
  }
})

// Gérer les erreurs de validation serveur
document.body.addEventListener('htmx:responseError', function(evt) {
  if (evt.detail.xhr.status === 422) {
    // Afficher les erreurs de validation du serveur
    const errors = JSON.parse(evt.detail.xhr.response)
    showValidationErrors(errors)
  }
})

Bonnes pratiques pour une validation accessible

Incluez toujours les attributs ARIA appropriés pour les lecteurs d’écran :

<input name="email" 
       aria-invalid="true" 
       aria-describedby="email-error">
<span id="email-error" role="alert">
  Veuillez saisir un email valide
</span>

Utilisez hx-trigger="blur" au lieu de keyup pour les champs où une validation constante pourrait être gênante, comme les mots de passe. Pour la recherche ou la vérification de disponibilité de nom d’utilisateur, keyup delay:500ms offre un bon équilibre.

Conclusion

La validation de formulaires htmx brille en gardant la logique de validation là où elle appartient—sur le serveur—tout en fournissant l’expérience fluide et réactive que les utilisateurs attendent. Que vous choisissiez la validation côté client pour un retour instantané ou la validation côté serveur pour des règles complexes, htmx réduit le JavaScript que vous écrivez tout en améliorant l’expérience utilisateur. Commencez avec hx-validate="true" pour les besoins de base, puis ajoutez progressivement la validation inline pour un formulaire poli et prêt pour la production.

FAQ

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.