Attribut HTML : pattern

Lorsqu'on utilise l'attribut pattern, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut title afin de fournir une description. Les agents utilisateurs peuvent utiliser la valeur de title lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de title à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.

Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par patternMismatch. L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre ^(?: et )$ afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).

Avec le fragment de code HTML suivant :

<p>
  <label
    >Veuillez saisir votre numéro de téléphone au format (123)456-7890 (<input
      name="tel1"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3-digit area code"
      size="2" />)-
    <input
      name="tel2"
      type="tel"
      pattern="[0-9]{3}"
      placeholder="###"
      aria-label="3-digit prefix"
      size="2" />
    -
    <input
      name="tel3"
      type="tel"
      pattern="[0-9]{4}"
      placeholder="####"
      aria-label="4-digit number"
      size="3" />
  </label>
</p>

Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attribut pattern défini sur chacun.

Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut patternMismatch sera true. On aura également l'activation de la pseudo-classe CSS :invalid.

input:invalid {
  border: red solid 3px;
}

En utilisant les attributs minlength et maxlength à la place, on aurait eu les propriétés validityState.tooLong ou validityState.tooShort qui auraient valu true.

On pourra utiliser l'attribut pattern afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir ce guide sur la validation avec les expressions rationnelles pour une introduction).

L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.

<form>
  <div>
    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
    <input
      type="text"
      id="uname"
      name="name"
      required
      size="45"
      pattern="[a-z]{4,8}"
      title="4 à 8 lettres en minuscules" />
    <span class="validity"></span>
    <p>
      Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8
      caractères.
    </p>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Cela donne le résultat suivant :

Lorsqu'un contrôle dispose de l'attribut pattern, l'attribut title, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut title pour fournir une aide visuelle n'est pas souhaitable, car la plupart des agents utilisateurs n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.

L'attribut title est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois, car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.

• Les contraintes de validation
• La validation des données de formulaires
• Les expressions rationnelles (ou expressions régulières / regexp)