Gestion de Contenu, de Communauté et de groupes de travail collaboratif - Open Source, français, sécurisé, stable et performant

Validation par le navigateur

Afin de vérifier que la validité du format de certaines entrées ou que les champs obligatoires ont bien été remplis avant d'envoyer les données au serveur, HTML5 introduit de nouveaux mécanismes puissants :

Les nouveaux attributs comme required ou pattern, utilisés conjointement avec les pseudoclasses CSS facilitent grandement ces vérifications et l'affichage des informations utiles à l'utilisateur. D'autres techniques plus avancées permettent d'utiliser !! pour définir des règles personnalisées de validation et les messages associés, ou de déterminer si un élément est invalide et pourquoi.

L'attribut required

Si l'attribut required est présent, alors le champ en question doit contenir une valeur lorsque le formulaire est soumis. Voici un exemple de champ input concernant une adresse e-mail obligatoire et permettant de vérifier que l'adresse est bien renseignée et valide selon les critères définis ici :

<input id="email_addr" type="email" name="email_addr" />

L'attribut pattern

L'attribut pattern permet de définir une expression régulière qui sera utilisée pour déterminer si la saisie est conforme au format attendu. L'exemple suivant correspond à un champ texte requis et représentant un code particulier. Dans l'exemple, nous souhaitons que ce code soit composé de trois lettres majuscules suivies de quatre chiffres. Les attributs required et pattern permettent de s'assurer que le champ sera rempli au format souhaité lors de la soumission. Enfin, lors du survol du champ, l'utilisateur verra apparaître un message correspondant à l'attribut title lui indiquant le format attendu.

<input id="part" title="<span style=" type="text" name="SN" />SN - 3 majuscules + 4 chiffres."/>

À partir de l'exemple précédent, on peut ajouter une bordure rouge à l'input tant que le champ ne contient pas de saisie valide. Pour cela, nous ajoutons le code CSS suivant pour créer la bordure rouge si le champ est invalide :

:invalid { border: 2px solid #ff0000; }

L'attribut formnovalidate

L'attribut formnovalidate s'applique aux input et button de type submit. S'il est présent, alors la validation par le navigateur sera désactivée. Dans l'exemple suivant, la validation du formulaire est effectuée en cliquant sur "Submit" mais ne l'est pas en cliquant sur "Save".

<input id="part" title="SN - 3 majuscules + 4 chiffres" type="text" name="SN" />
<input type="submit" value="Save" />
<input type="submit" value="Submit" />

L'API de validation

L'API de validation met à votre disposition des outils puissants permettant de gérer une validation personnalisée des formulaires. Cette API permet de déterminer des messages d'erreurs, de vérifier si un élément est valide et de préciser la raison pour laquelle il est invalide. Dans l'exemple suivant, nous affichons un message personnalisé si les valeurs de deux champs sont différentes.

<label>Email: input id="email_addr" type="email" name="email_addr" />
<label>Repeat Email: input id="email_addr_repeat" type="email" name="email_addr_repeat" />

<script type="text/!!">
<//![CDATA[
function check(input) {
  if (input.value != document.getElementById('email_addr').value) {
     input.setCustomValidity('The two email addresses must match.');
  } else {
     // input is valid -- reset the error message
     input.setCustomValidity('');
  }
}
// ]]>
</script>