Validation en temps réel des formulaires JavaScript: résolvez le problème du comportement incohérent entre JSFiddle et le navigateur

Style CSS:

 #NameError {
  Affichage: aucun; / * Le message d'erreur est masqué par défaut * /
  taille de police: 0,8EM;
  Couleur: rouge; / * Ajouter la couleur du message d'erreur * /
}

# nameError.Visible {
  Affichage: bloc; / * Afficher * / lorsque le message d'erreur est visible
}

input.invalid {
  Color à la frontière: rouge; / * La bordure devient rouge lorsque la boîte d'entrée n'est pas valide * /
}

Logique de vérification JavaScript (version initiale):

 const soumid = document.getElementById ("soumettre");

soumid.addeventListener ("cliquez", valider);

fonction valider (e) {
  E.PreventDefault (); // Empêche le comportement de soumission par défaut du formulaire const FirstNameField = document.getElementById ("FirstName");
  const nameError = document.getElementById ("NameError"); // Obtenez l'élément d'erreur à l'avance Soit valide = true; // Supposons que le valide initial if (! FirstNameField.Value) {
    // Si la boîte d'entrée est vide (statut non valide)
    nameError.classList.add ("Visible");
    FirstNameField.ClassList.add ("invalid");
    nameError.setAttribute ("Aria-Hidden", false); // Le message d'erreur est visible nameError.setAttribute ("aria-invalid", true); // Le champ de saisie de marque n'est pas valide valide = false; // La vérification de la marque a échoué}
  // Remarque: le retour logique valide lorsque le traitement de l'entrée est valide est manquant ici;
}

Le problème de base avec ce code est que la fonction Validate gère uniquement le cas où le champ de saisie est vide (non valide). Lorsque FirstNameField.Value est vide, il ajoute des classes visibles et non valides et définit l'attribut ARIA correspondant pour afficher l'erreur. Cependant, si l'utilisateur initialement entré est vide, une invite d'erreur est déclenchée, puis le contenu est entré, ce qui rend le champ valide, la logique actuelle ne fournit aucun mécanisme pour supprimer ces invites et styles d'erreur.

Dans les environnements de bac à sable tels que JSFiddle, car les scénarios de test sont généralement simples, il ne peut tester que l'état invalide initial, ou le comportement de rafraîchissement de la page couvre ce problème. Cependant, dans les navigateurs réels, les utilisateurs entrent dynamiquement et modifieront le contenu. Si la logique de vérification ne peut pas répondre à cette modification, le message d'erreur "colle" sur la page, provoquant une mauvaise expérience utilisateur.

Améliorer la logique de vérification: gérer les états valides et non valides

Pour résoudre ce problème, nous devons ajouter une branche Else à la fonction Validate pour gérer la situation lorsque le champ de saisie devient valide. La responsabilité de cette branche d'autre est d'éliminer tous les styles d'état non valides et les propriétés ARIA qui peuvent être ajoutées auparavant.

Logique de vérification JavaScript corrigée:

 const soumid = document.getElementById ("soumettre");

soumid.addeventListener ("cliquez", valider);

fonction valider (e) {
  E.PreventDefault (); // Empêche le comportement de soumission par défaut du formulaire const FirstNameField = document.getElementById ("FirstName");
  const nameError = document.getElementById ("NameError"); // Obtenez l'élément de message d'erreur LET VALID = true; // Supposons que le valide initial if (! FirstNameField.Value) {
    // Si la boîte d'entrée est vide (statut non valide)
    nameError.classList.add ("Visible");
    FirstNameField.ClassList.add ("invalid");
    nameError.setAttribute ("Aria-Hidden", false); // Le message d'erreur est visible nameError.setAttribute ("aria-invalid", true); // Le champ de saisie de marque n'est pas valide valide = false; // La vérification de marque a échoué} else {
    // Si la boîte d'entrée a une valeur (statut valide)
    FirstNameField.ClassList.Remove ("Invalid"); // Supprime le style non valide nameError.classList.Remove ("Visible"); // masquer le message d'erreur nameError.setAttribute ("aria-hidden", true); // Le message d'erreur cache NameError.SetAttribute ("aria-invalid", false); // Marquez le champ de saisie valide}
  retour valide; // Retour Résultat de vérification}

En ajoutant le bloc Else, nous avons assuré:

1. Lorsque la zone d'entrée est vide, les invites d'erreur et les styles non valides sont appliqués correctement.
2. Lorsque la zone d'entrée a une valeur, les invites d'erreur possibles et les styles non valides qui peuvent exister auparavant seront supprimés correctement.

De cette façon, peu importe comment l'utilisateur entre et le modifie, la rétroaction de vérification peut refléter l'état du champ de saisie actuel en temps réel et avec précision.

Exemple de code complet

Pour faciliter vos tests dans votre environnement local, ce qui suit est le code HTML, CSS et le code JavaScript révisé complet.

HTML:

CSS:

 #NameError {
  Affichage: aucun;
  taille de police: 0,8EM;
  Couleur: rouge; / * Ajouter la couleur du message d'erreur * /
}

# nameError.Visible {
  Affichage: bloc;
}

input.invalid {
  Color à la frontière: rouge;
}

Javascript:

 const soumid = document.getElementById ("soumettre");

soumid.addeventListener ("cliquez", valider);

fonction valider (e) {
  E.PreventDefault ();

  const FirstNameField = document.getElementById ("FirstName");
  const nameError = document.getElementById ("NameError"); 
  Soit valide = true;

  if (! FirstNameField.Value) {
    nameError.classList.add ("Visible");
    FirstNameField.ClassList.add ("invalid");
    nameError.setAttribute ("Aria-Hidden", false);
    nameError.setAttribute ("aria-invalid", true);
    valide = false;
  } autre {
    FirstNameField.ClassList.Remove ("Invalid");
    nameError.classList.Remove ("Visible");
    nameError.setAttribute ("aria-hidden", true);
    nameError.setAttribute ("aria-invalid", false);
  }
  retour valide;
}

Enregistrez le code en tant que fichier HTML et ouvrez-le dans le navigateur. Essayez d'entrer et de nettoyer le contenu dans la zone d'entrée, et vous constaterez que les invites et les styles de vérification peuvent être affichés et cachés correctement.

Notes et meilleures pratiques

1. Complet: lors de la mise en œuvre de la validation du formulaire, considérez toujours tous les états d'entrée possibles (valides, non valides, initialement non entrés). La logique de vérification devrait être capable de basculer en douceur entre ces états.
2. Expérience utilisateur: les commentaires en temps réel sont la clé pour améliorer l'expérience utilisateur. Lorsque l'utilisateur entre dans le contenu, le résultat de vérification doit être fourni immédiatement, plutôt que d'attendre que le formulaire soit soumis pour éclairer l'erreur.
3. Accessibilité:
   • aria-hidden = "true / false": utilisé pour informer les technologies d'assistance (telles que les lecteurs d'écran) si le message d'erreur est visible. Lorsque le message d'erreur s'affiche, il doit être défini sur false; Lorsqu'il est caché, il doit être défini sur true.
   • aria-invalid = "true / false": utilisé pour marquer la validité du champ de saisie. Réglé sur true lorsque le champ n'est pas valide; réglé sur false lorsqu'il est valide.
   • Role = "alert": utilisé pour informer les lecteurs d'écran qu'il s'agit d'une mise à jour importante et sensible au temps qui nécessite une notification immédiate des utilisateurs.
   • Ces attributs ARIA sont essentiels pour s'assurer que les utilisateurs handicapés peuvent également utiliser des formulaires sans barrières.
4. Écoute d'événements: pour une vérification en temps réel, en plus des événements de clic (pour la vérification finale à la soumission), les événements d'entrée ou de flou pour les champs d'entrée sont généralement écoutés pour une validation immédiatement lorsque l'utilisateur entre ou quitte le champ. Par exemple:

    FirstNameField.AddeventListener ("Input", fonction () {
     // Vous pouvez appeler ici une fonction de vérification légère, ou exécuter directement la logique if (this.value) dans le bloc ci-dessus {
       // effacer l'état d'erreur NameError.classList.Remove ("Visible");
       this.classList.Remove ("invalid");
       nameError.setAttribute ("aria-hidden", true);
       nameError.setAttribute ("aria-invalid", false);
     }
     // Si une vérification plus complexe en temps réel est requise, vous pouvez appeler une fonction spéciale});

5. Modularité: pour les formes plus complexes, la logique de vérification peut être encapsulée en fonctions ou modules indépendants pour améliorer la maintenabilité et la réutilisabilité du code.

Résumer

Le problème de la vérification en temps réel des formulaires JavaScript fonctionnant correctement dans JSFiddle mais "échoué" dans le navigateur découle souvent du fait que la logique de vérification ne couvre pas pleinement les deux états de validité et d'invalidité du champ d'entrée. Ce problème peut être résolu efficacement en ajoutant une branche ELSE à la fonction de vérification pour s'assurer que le mauvais style et les attributs ARIA peuvent être effacés à temps lorsque le champ est valide. Lors de la mise en œuvre de la validation du formulaire, nous devons toujours nous concentrer sur l'intégrité, l'expérience utilisateur et l'accessibilité de la logique pour créer des formulaires Web plus robustes et conviviaux.