Validation

htmx s’intègre à l’API de validation HTML5 et n’émettra pas de requête pour un formulaire si un champ validable est invalide. Cela est vrai aussi bien pour les requêtes AJAX que pour les envois via WebSocket.

htmx déclenche des événements autour de la validation qui peuvent être utilisés pour intégrer une validation personnalisée et une gestion des erreurs :

• htmx:validation:validate : appelé avant que la méthode checkValidity() d’un élément soit invoquée. Peut être utilisé pour ajouter une logique de validation personnalisée.
• htmx:validation:failed : appelé lorsque checkValidity() renvoie false, indiquant une entrée invalide.
• htmx:validation:halted : appelé lorsqu’une requête n’est pas émise en raison d’erreurs de validation. Les erreurs spécifiques peuvent être trouvées dans l’objet event.detail.errors.

Les éléments non-formulaires ne se valident pas par défaut avant d’émettre des requêtes, mais vous pouvez activer la validation en définissant l’attribut hx-validate sur « true ».

Exemple de Validation

Voici un exemple d’un champ de saisie qui utilise l’attribut hx-on pour intercepter l’événement htmx:validation:validate et exiger que la valeur du champ soit « foo » :

<form id="example-form" hx-post="/test">
    <input name="example"
           onkeyup="this.setCustomValidity('')"  // réinitialiser la validation sur la saisie
           hx-on:htmx:validation:validate="if(this.value != 'foo') {
                    this.setCustomValidity('Veuillez entrer la valeur foo') // définir l'erreur de validation
                    htmx.find('#example-form').reportValidity()          // signaler le problème
                }">
</form>

Notez que toutes les validations côté client doivent être refaites côté serveur, car elles peuvent toujours être contournées.