Article original : Basic Form Validation in JavaScript

Dans le passé, la validation de formulaire se faisait sur le serveur, après qu'une personne avait déjà saisi toutes ses informations et appuyé sur le bouton d'envoi.

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

C'était un processus long et cela mettait beaucoup de charge sur le serveur.

De nos jours, JavaScript offre plusieurs moyens de valider les données d'un formulaire directement dans le navigateur avant de les envoyer au serveur.

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

<html>
<head>
  <title>Validation de formulaire</title>
  <script type="text/javascript">
    // La validation de formulaire ira ici
  </script>
</head>
<body>
  <form id="form">
    <table cellspacing="2" cellpadding="2" border="1">
      <tr>
        <td align="right">Nom d'utilisateur</td>
        <td><input type="text" id="username" /></td>
      </tr>
      <tr>
        <td align="right">Adresse e-mail</td>
        <td><input type="text" id="email-address" /></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Soumettre" id="submit-btn" /></td>
      </tr>
    </table>
  </form>
</body>
</html>

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 validate qui affiche une alerte si les champs de nom d'utilisateur et d'adresse e-mail sont vides, sinon elle retourne vrai :

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("Veuillez entrer votre nom d'utilisateur.");
    username.focus();
    return false;
  }
  if (emailAddress.value === "") {
    alert("Veuillez entrer votre adresse e-mail.");
    emailAddress.focus();
    return false;
  }

  return true;
}

submitBtn.addEventListener('click', validate);

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

C'est là que la validation du format des données intervient.

Validation du format des données

Ce type de validation examine en réalité les valeurs dans le formulaire et vérifie qu'elles sont correctes.

Valider les 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 valides de caractères.

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

  • Une adresse doit contenir un @ et au moins un caractère 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 @

Avec cela à l'esprit, de nombreux développeurs utilisent des 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 /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

emailIsValid('free@code@camp.org') // false
emailIsValid('quincy@freecodecamp.org') // true

Ajoutée au code de l'exemple précédent, cela donnera :

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("Veuillez entrer votre nom d'utilisateur.");
    username.focus();
    return false;
  }

  if (emailAddress.value === "") {
    alert("Veuillez entrer votre adresse e-mail.");
    emailAddress.focus();
    return false;
  }

  if (!emailIsValid(emailAddress.value)) {
    alert("Veuillez entrer une adresse e-mail valide.");
    emailAddress.focus();
    return false;
  }

  return true; // Peut soumettre les données du formulaire au serveur
}

const emailIsValid = email => {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

submitBtn.addEventListener('click', validate);

Contraintes de formulaire HTML5

Certaines des contraintes HTML5 couramment utilisées pour <input> sont l'attribut type (par exemple, type="password"), maxlength, required et disabled.

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

Plus d'informations