Vérification du formulaire en temps réel: Améliorations subtiles pour améliorer l'expérience utilisateur

Points de base:

• JavaScript peut être utilisé pour implémenter la vérification du formulaire en temps réel, qui fournit aux utilisateurs des commentaires instantanés sur la validité des entrées, améliorant ainsi l'expérience utilisateur et maintenant l'intégrité des données, garantissant que seules les données valides sont soumises.
• Les attributs HTML5 pattern et required peuvent être utilisés pour définir la plage d'entrée valide des éléments de forme. Si le navigateur ne prend pas en charge ces propriétés, ses valeurs peuvent être utilisées comme base pour les populateurs de compatibilité JavaScript.
L'attribut
• aria-invalid peut être utilisé pour indiquer si le champ n'est pas valide. Cette propriété fournit des informations d'accessibilité et peut être utilisée comme crochet CSS pour indiquer visuellement un champ non valide.
• Fonction JavaScript instantValidation() Testez le champ et effectuez une vérification réelle, en contr?lant l'attribut aria-invalid pour indiquer l'état du champ. Cette fonction peut être liée à l'événement onchange pour fournir une validation de formulaire en temps réel.

HTML5 introduit plusieurs nouvelles propriétés pour implémenter la validation de formulaire basée sur le navigateur. La propriété pattern est une expression régulière qui définit des plages d'entrée valides pour les éléments de zone de texte et la plupart des types d'entrée. L'attribut required Spécifie si le champ est requis. Pour les navigateurs plus agés qui ne prennent pas en charge ces propriétés, nous pouvons utiliser leurs valeurs comme base pour les charges de compatibilité. Nous pouvons également les utiliser pour fournir des améliorations plus intéressantes - validation de formulaire en temps réel.

Il convient de noter que vous n'utilisez pas la vérification de la surclassement, afin de ne pas perturber le comportement de navigation normal et entraver les opérations utilisateur. Par exemple, j'ai vu des formulaires qui ne peuvent pas laisser des champs non valides en utilisant la clé onglet - JavaScript est utilisé (plus précisément, abusé) pour forcer la mise au point à rester dans le champ jusqu'à ce qu'elle soit valide. Ceci est très défavorable à l'expérience utilisateur et viole directement les directives d'accessibilité.

Cet article introduira une méthode d'implémentation moins invasive. Ce n'est même pas la validation complète du client - c'est juste une légère amélioration de l'expérience utilisateur implémentée de manière accessible, et lorsque j'ai testé le script, il a trouvé, c'était presque la même chose que l'implémentation native actuelle de Firefox!

concept de base

Dans la dernière version de Firefox, si le champ requis est vide ou si sa valeur ne correspond pas au modèle, le champ affichera une bordure rouge comme indiqué dans la figure suivante:

Bien s?r, cela n'arrivera pas immédiatement. Si cela se produit, la bordure sera affichée par défaut pour chaque champ requis. Au lieu de cela, ces bordures ne sont affichées qu'après avoir interagi avec le champ, qui est essentiellement (mais pas exactement) similaire à l'événement onchange.

Par conséquent, nous utiliserons onchange comme événement de déclenchement. Alternativement, nous pouvons utiliser l'événement oninput, qui tirera tant que nous tapons ou collez n'importe quelle valeur sur le terrain. Mais c'est vraiment trop "instantané" car il peut facilement déclencher à plusieurs reprises tout en tapant une succession rapide, ce qui entra?ne un effet vacillant, qui peut être ennuyé ou distrait par certains utilisateurs. Et, de toute fa?on, oninput ne se déclenche pas à partir de l'entrée de programmation, et onchange se déclenche, nous pouvons en avoir besoin pour gérer les opérations telles que la saisie automatique à partir de plugins tiers.

Définir HTML et CSS

Jetons un coup d'?il à notre implémentation, à commencer par le HTML sur lequel il est basé:

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

Cet exemple est un formulaire de commentaire simple où certains champs sont nécessaires, certains champs sont vérifiés et certains champs satisfont aux deux conditions. Les champs avec required Les attributs ont également des attributs aria-required pour fournir une sémantique de secours pour les technologies d'assistance qui ne prennent pas en charge de nouveaux types d'entrée.

La spécification

ARIA définit également l'attribut aria-invalid, que nous utiliserons pour indiquer si le champ n'est pas valide (il n'y a pas d'attribut équivalent dans HTML5). La propriété aria-invalid fournit évidemment des informations d'accessibilité, mais elle peut également être utilisée comme crochet CSS pour appliquer les bordures rouges:

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

Nous pouvons simplement utiliser box-shadow sans se soucier des frontières. box-shadow

Ajouter JavaScript

Maintenant que nous avons du code statique, nous pouvons ajouter des scripts. Tout d'abord, nous avons besoin d'une fonction de base

: addEvent()

function addEvent(node, type, callback) {
  if (node.addEventListener) {
    node.addEventListener(type, function(e) {
      callback(e, e.target);
    }, false);
  } else if (node.attachEvent) {
    node.attachEvent('on' + type, function(e) {
      callback(e, e.srcElement);
    });
  }
}

Ensuite, nous avons besoin d'une fonction pour déterminer si un champ donné doit être validé, ce qui teste simplement qu'il n'est ni désactivé ni en lecture seule, et qu'il a un attribut

ou pattern: required

Les deux premières conditions peuvent sembler verbeuses, mais elles sont nécessaires car les propriétés

function shouldBeValidated(field) {
  return (
    !(field.getAttribute("readonly") || field.readonly) &&
    !(field.getAttribute("disabled") || field.disabled) &&
    (field.getAttribute("pattern") || field.getAttribute("required"))
  );
}

et

d'un élément ne reflètent pas nécessairement leur état d'attribut. Par exemple, dans Opera, les champs avec attribut codé en dur disabled retournent toujours readonly pour leur attribut readonly="readonly" (l'attribut de point correspond uniquement à l'état défini via le script). readonly undefined Une fois que nous avons ces utilitaires, nous pouvons définir la fonction de validation principale, qui teste le champ, puis effectue la validation réelle au besoin:

Par conséquent, si le champ est requis mais n'a aucune valeur, ou il a un modèle et une valeur, mais que la valeur ne correspond pas au modèle, le champ n'est pas valide.

function instantValidation(field) {
  if (shouldBeValidated(field)) {
    var invalid =
      (field.getAttribute("required") && !field.value) ||
      (field.getAttribute("pattern") &&
        field.value &&
        !new RegExp(field.getAttribute("pattern")).test(field.value));
    if (!invalid && field.getAttribute("aria-invalid")) {
      field.removeAttribute("aria-invalid");
    } else if (invalid && !field.getAttribute("aria-invalid")) {
      field.setAttribute("aria-invalid", "true");
    }
  }
}

étant donné que le modèle définit déjà la forme de cha?ne de l'expression régulière, nous avons juste besoin de passer la cha?ne au constructeur

, et il crée un objet d'expression régulière que nous pouvons tester pour cette valeur. Cependant, nous devons prévoir la valeur pour nous assurer qu'elle n'est pas vide afin que le regex lui-même n'ait pas à considérer la cha?ne vide.

Une fois que nous avons déterminé si le champ n'est pas valide, nous pouvons contr?ler sa propriété aria-invalid pour indiquer l'état - l'ajouter à un champ non valide qui n'a pas encore la propriété, ou à partir d'un champ valide qui a la propriété supprimée dans. Très simple! Enfin, pour que cela fonctionne, nous devons lier la fonction de vérification à l'événement onchange. Cela devrait être simple comme ceci:

Cependant, pour que cela fonctionne, l'événement

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

doit bouillonner (en utilisant une technologie communément appelée délégué d'événement), mais dans Internet Explorer 8 et plus t?t, l'événement

onchange ne se produit pas Bulle onchange. Nous pouvons choisir d'ignorer ces navigateurs, mais je pense que ce serait dommage, surtout si le problème est si facile à résoudre. Cela signifie simplement que le code est un peu plus complexe - nous devons obtenir une collection d'éléments de zone de saisie et de texte, d'adhérer à eux et de lier l'événement à chaque champ séparément: onchange

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

Conclusion et prospect

C'est que - une amélioration de vérification de formulaire simple et non invasive en temps réel qui fournit des conseils accessibles et intuitifs pour aider les utilisateurs à remplir les formulaires.

Une fois ce script implémenté, nous pouvons en fait terminer un programme complet de remplissage de compatibilité en quelques étapes. Un tel script dépasse la portée de cet article, mais si vous souhaitez le développer davantage, tous les modules de base sont ici-tests si les champs doivent être validés, les champs doivent être validés selon le schéma et / ou

et l'événement de déclenchement de liaison.

required Je dois admettre que je ne sais pas si cela en vaut vraiment la peine! Si vous avez déjà cette amélioration (qui fonctionne dans IE7 et tous les navigateurs modernes), et considérez que vous n'avez pas d'autre choix que d'implémenter la vérification c?té serveur, et considérez que vous avez pris en charge Les a utilisés pour la vérification de pré-submission - avec tout cela à l'esprit, est-il vraiment nécessaire d'ajouter un autre remplissage de compatibilité?

(La section FAQ sur la vérification en temps réel peut être ajoutée ici, le contenu est le même que la section FAQ dans le document d'origine) pattern

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!