Validation de formulaire de base en JavaScript

Dans le passé, la validation du formulaire se produisait sur le serveur, après qu'une personne avait déjà entré toutes ses informations et appuyé sur le bouton Soumettre.

Si les informations étaient incorrectes ou manquantes, le serveur devrait tout renvoyer avec un message indiquant à la personne de corriger le formulaire avant de le soumettre à nouveau.

C'était un processus long et impliquerait une lourde charge sur le serveur.

De nos jours, JavaScript offre un certain nombre de façons de valider les données d'un formulaire directement dans le navigateur avant de l'envoyer au serveur.

Voici le code HTML que nous utiliserons dans les exemples suivants:

  Form Validation  // Form validation will go here     
Username
Email Address

Validation de base

Ce type de validation consiste à vérifier tous les champs obligatoires et à s'assurer qu'ils sont correctement remplis.

Voici un exemple de base d'une fonction validatequi affiche une alerte si les entrées du nom d'utilisateur et de l'adresse e-mail sont vides, sinon elle renvoie true:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } return true; } submitBtn.addEventListener('click', validate); 

Mais que se passe-t-il si quelqu'un saisit un texte aléatoire comme adresse e-mail? Actuellement, la validatefonction retournera toujours true. Comme vous pouvez l'imaginer, l'envoi de mauvaises données au serveur peut entraîner des problèmes.

C'est là qu'intervient la validation du format de données.

Validation du format des données

Ce type de validation examine en fait les valeurs du formulaire et vérifie qu'elles sont correctes.

La validation des adresses e-mail est notoirement difficile - il existe un grand nombre d'adresses e-mail et d'hôtes légitimes, et il est impossible de deviner toutes les combinaisons de caractères valides.

Cela dit, il existe quelques facteurs clés communs à toutes les adresses e-mail valides:

  • Une adresse doit contenir un @ et au moins un point (.)
  • Le caractère @ ne peut pas être le premier caractère de l'adresse
  • Le . doit venir au moins un caractère après le caractère @

Dans cet esprit, peut-être que les développeurs utilisent regex pour déterminer si une adresse e-mail est valide ou non. Voici une fonction que Tyler McGinnis recommande sur son blog:

const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } emailIsValid('[email protected]@camp.org') // false emailIsValid('[email protected]') // true

Ajouté au code du dernier exemple, il ressemblera à ceci:

const submitBtn = document.getElementById('submit-btn'); const validate = (e) => { e.preventDefault(); const username = document.getElementById('username'); const emailAddress = document.getElementById('email-address'); if (username.value === "") { alert("Please enter your username."); username.focus(); return false; } if (emailAddress.value === "") { alert("Please enter your email address."); emailAddress.focus(); return false; } if (!emailIsValid(emailAddress.value)) { alert("Please enter a valid email address."); emailAddress.focus(); return false; } return true; // Can submit the form data to the server } const emailIsValid = email => { return /^[^\[email protected]][email protected][^\[email protected]]+\.[^\[email protected]]+$/.test(email); } submitBtn.addEventListener('click', validate); 

Contraintes de formulaire HTML5

Certaines des contraintes HTML5 couramment utilisées pour sont l' typeattribut (par exemple type="password") maxlength, requiredet disabled.

Une contrainte moins couramment utilisée est l' patternattribut qui prend une expression régulière JavaScript.

Plus d'information

  • Validation des données de formulaire | MDN
  • Validation des contraintes | MDN