La validation des données de formulaires

• ِComprendre ce qu’est la validation d’un formulaire, et les différents types de validation.

• Valider un formulaire dans une page web c’est être sur que les éléments de ce formulaire ne contiennent pas des erreurs
• La validation des données d’un formulaire web consiste à s’assurer que les entrées de l’utilisateur sont propres, correctes, utiles et surtout ne porte pas des injections.
• La validation d’un formulaire Web est une tâche un peut complexe.En effet il faut s’assurer que les données entrées par l’utilisateur correspondent au format attendu par le développeur, qu’elles soient valables et qu’elles ne touchent pas à la sécurité du Web.

1. La validation d’un formulaire côté client

• La validation d’un formulaire Web côté client est essentielle. C’est elle qui permet d’informer l’utilisateur instantanément lorsqu’il saisie des informations invalides.
• La validation côté client peut être effectuée à l’aide d’attributs HTML, CSS ou à l’aide de JavaScript.

1. La validation de formulaire avec HTML5.

• La validation à l’aide d’attributs dans les balises HTML, elle aura toujours lieu et ce, même si le JavaScript est désactivé.
• Cependant, il est possible de modifier ces attributs dans le navigateur, notamment en utilisant les outils de développement sous Chrome ou Firefox par exemple.
• La syntaxe HTML5 permette la validation des données saisies dans un formulaire grâce aux éléments:
• pattern: Cet attribut spécifie une expression régulière sur laquelle la valeur de l’élément <input> est vérifiée lors de la soumission du formulaire.
• placeholder: Cet attribut spécifie un indice court décrivant la valeur attendue d’un champ de saisie (par exemple, une valeur exemple ou une brève description du format attendu).
• required: Cet attribut spécifie qu’un champ de saisie doit être rempli avant de soumettre le formulaire.
• disabled: Cet attribut que l’élément <input> doit être désactivé, il peut être défini pour empêcher un utilisateur d’utiliser l’élément <input> jusqu’à ce qu’une autre condition soit remplie (par exemple, sélectionner une case à cocher, etc.).
• max: Cet attribut spécifie la valeur maximale pour un élément <input> .
• min: Cet attribut spécifie la valeur minimale pour un élément <input> .
• type: Cet attribut spécifie le type de média Internet (anciennement appelé type MIME) du document lié, il n’est utilisé que si l’attribut href est défini.

2. La validation de formulaire avec les Pseudo-sélecteurs CSS

• :disabled: Ce sélecteur correspond à chaque élément désactivé dans le formulaire.
• :invalid : Ce sélecteur sélectionne les éléments de formulaire avec une valeur non validée en fonction des paramètres de l’élément.
• :optional: Ce sélecteur sélectionne les éléments de formulaire qui sont facultatifs.
• :required : Ce sélecteur sélectionne les éléments de formulaire nécessaires qui seront définis comme requis.
• :valid: Ce sélecteur sélectionne les éléments de formulaire avec une valeur validée en fonction des paramètres de l’élément.

3. La validation de formulaire avec JavaScript

• La validation du formulaire HTML peut être effectuée par JavaScript et essentielle .
• Dans l’exemple suivant si un champ de formulaire (Forminsc) est vide, une fonction alerte un message et renvoie la valeur false pour empêcher l’envoi du formulaire:

function validerForm() {
  var x = document.forms["forminsc"]["nom"].value;
  if (x == "") {
    alert("Le champs nom doit être rempli");
    return false;
  }
}

2. La validation d’un formulaire côté serveur

• La validation du formulaire coté serveur se fait généralement avec PHP ce qu’on va le voir ultérieurement dans le cours PHP

Une validation côté client doit donc toujours être accompagnée d’une validation côté serveur.