JavaScript

Répondre aux événements de formulaire

Vous pouvez utiliser JavaScript pour répondre aux interactions des utilisateurs sur votre formulaire, afficher des champs de formulaire supplémentaires, envoyer un formulaire et bien plus encore.

Aider les utilisateurs à remplir des éléments de contrôle de formulaire supplémentaires

Imaginons que vous ayez créé un formulaire d'enquête. Une fois qu'un utilisateur a sélectionné une option, vous souhaitez afficher un <input> supplémentaire pour poser une question spécifique liée à la sélection. Comment afficher uniquement l'élément <input> pertinent ?

Vous ne pouvez utiliser JavaScript pour afficher un <input> que lorsque le <input type="radio"> associé est actuellement sélectionné.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Examinons le code JavaScript de la démonstration. Avez-vous remarqué les attributs aria-controls et aria-expanded ? Utilisez ces attributs ARIA pour aider les utilisateurs de lecteurs d'écran à comprendre quand un contrôle de formulaire supplémentaire est affiché ou masqué.

Assurez-vous que les utilisateurs peuvent envoyer un formulaire sans quitter la page

Imaginons que vous disposiez d'un formulaire de commentaires. Lorsqu'un lecteur ajoute un commentaire et envoie le formulaire, il serait idéal qu'il puisse voir immédiatement le commentaire sans actualiser la page.

Pour ce faire, écoutez l'événement onsubmit, puis utilisez event.preventDefault() pour empêcher le comportement par défaut et envoyez FormData à l'aide de l'API Fetch.

Browser Support

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1.

Source

Votre script backend peut vérifier si une requête POST semble provenir du navigateur (à l'aide de l'attribut action d'un élément de formulaire, où method="post") ou de JavaScript, comme une requête fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Informez toujours les utilisateurs de lecteurs d'écran des modifications apportées au contenu dynamique. Ajoutez un élément avec l'attribut aria-live="polite" à votre code HTML, puis mettez à jour le contenu de l'élément après un changement. Par exemple, remplacez le texte par "Votre commentaire a bien été publié" après qu'un utilisateur a envoyé un commentaire.

En savoir plus sur les zones live ARIA

Validation avec JavaScript

Assurez-vous que les messages d'erreur correspondent au style et au ton de votre site

Le libellé des messages d'erreur par défaut diffère d'un navigateur à l'autre. Comment vous assurer que le même message s'affiche pour tous les utilisateurs et qu'il est en adéquation avec le style et le ton de votre site ? Utilisez la méthode setCustomValidity() de l'API Constraint Validation pour définir vos propres messages d'erreur.

Assurez-vous que les utilisateurs sont avertis des erreurs en temps réel

Les fonctionnalités HTML intégrées pour la validation des formulaires sont idéales pour avertir les utilisateurs des champs de formulaire non valides avant que les données ne soient envoyées à votre backend. Ne serait-il pas judicieux d'envoyer une notification aux utilisateurs dès qu'ils quittent un champ de formulaire ?

Écoutez l'événement blur qui se déclenche lorsqu'un élément perd le focus, puis utilisez l'interface ValidityState pour détecter si une commande de formulaire n'est pas valide.

Assurez-vous que les utilisateurs peuvent voir le mot de passe qu'ils ont saisi

Le texte saisi pour <input type="password"> est masqué par défaut, afin de respecter la confidentialité des utilisateurs. Aidez les utilisateurs à saisir leur mot de passe en affichant un <button> pour activer/désactiver la visibilité du texte saisi.

Essayez la démo. Activez/Désactivez la visibilité du texte saisi à l'aide de l'icône Afficher le mot de passe <button>. Comment ça marche ? Lorsque vous cliquez sur Afficher le mot de passe, l'attribut type du champ de mot de passe passe de type="password" à type="text", et le texte <button> est remplacé par "Masquer le mot de passe".

Il est important de rendre le bouton Afficher le mot de passe accessible. Associez <button> à <input type="password"> à l'aide de l'attribut aria-controls.

Pour avertir les utilisateurs de lecteurs d'écran si le mot de passe est actuellement affiché ou masqué, utilisez un élément masqué avec aria-live="polite" et modifiez son texte en conséquence. Il est important que les utilisateurs de lecteurs d'écran sachent quand un mot de passe est affiché et visible par quelqu'un d'autre qui regarde leur écran.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Découvrez comment implémenter une option d'affichage du mot de passe.

Ressources