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 supplémentaires, envoyer un formulaire, et bien plus encore.

Aider les utilisateurs à remplir des commandes de formulaire supplémentaires

Imaginez que vous avez 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 n'afficher que l'élément <input> approprié ?

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

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

Examinons les Code JavaScript pour 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 une commande de formulaire supplémentaire est affichée ou masquée.

S'assurer que les utilisateurs peuvent envoyer un formulaire sans quitter une page

Imaginons que vous avez un formulaire de commentaire. Lorsqu'un lecteur ajoute un commentaire et envoie le formulaire, l'idéal serait de pouvoir consulter 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 le FormData à l'aide de l'API Fetch.

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 du formulaire, où method="post") ou à partir de JavaScript, comme une requête fetch().

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

Toujours informer les utilisateurs de lecteurs d'écran des modifications de contenu dynamique Ajoutez un élément avec l'attribut aria-live="polite" à votre code HTML. et mettre à jour le contenu de l'élément après une modification. 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 régions actives ARIA

Validation avec JavaScript

Vérifier que les messages d'erreur sont conformes au style et au ton de votre site

La formulation des messages d'erreur par défaut diffère selon les navigateurs. Comment vous assurer que le même message est présenté à tous les utilisateurs, et que le message est en adéquation avec le style et le ton de votre site ? Utilisez le setCustomValidity() de l'API Constraint Validation pour définir vos propres messages d'erreur.

S'assurer que les utilisateurs sont informés des erreurs en temps réel

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

Écoutez l'événement blur qui se déclenche lorsqu'un élément n'est plus sélectionné, et utilisez l'événement ValidityState pour détecter si une commande de formulaire n'est pas valide.

S'assurer 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. de respecter la vie privée 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 version de démonstration. Activez ou désactivez visibilité du texte saisi, à l'aide de l'option Afficher le mot de passe <button>. Comment ça marche ? Cliquez sur Afficher le mot de passe. modifie l'attribut type du champ de mot de passe de type="password" à type="text", et le texte <button> devient "Masquer le mot de passe".

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

Pour avertir les utilisateurs de lecteur d'écran si le mot de passe est actuellement affiché ou masqué, utiliser un élément masqué avec aria-live="polite" et modifier son texte en conséquence. Il est important de permettre aux utilisateurs de lecteurs d'écran de savoir quand un mot de passe est affiché et visible par une autre personne qui regarde leur écran.

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

En savoir plus sur l'implémentation d'une option permettant d'afficher le mot de passe

Ressources

• FormData
• API Constraint Validation
• <input type="password">