Comment implémenter la validation de formulaire côté client avec JavaScript
JavaScript est l'un des langages de programmation les plus populaires et les plus polyvalents avec lesquels vous pouvez commencer aujourd'hui. On dit à juste titre que ce langage de programmation est le langage du Web et qu'il est essentiel pour ajouter de l'interactivité à vos sites Web.
L'élément de formulaire est l'un des éléments HTML les plus utilisés sur les sites Web. Ces formulaires prennent les données de l'utilisateur et les traitent dans le navigateur ou le serveur. Cependant, il est important de valider ces entrées pour résoudre les problèmes de sécurité et les bogues indésirables.
Comprendre la manipulation du DOM
Avant de procéder à la mise en œuvre de la validation de formulaire côté client avec JavaScript, il est essentiel de comprendre le modèle objet de document, communément appelé « DOM ». Le DOM est une API standardisée qui permet à JavaScript d'interagir avec les éléments d'une page Web HTML.
Pour ajouter des écouteurs d'événement et récupérer les entrées utilisateur, vous devrez comprendre les bases de la manipulation DOM. Voici un exemple qui explique comment vous pouvez modifier le contenu de la page Web à l'aide de l'API DOM et de JavaScript :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="paragraph"></p>
</body>
<script>
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
</script>
</html>Dans le code ci-dessus, la balise <p> a un identifiant de paragraphe . Lors de l'écriture du code JavaScript, vous pouvez accéder à cet élément en appelant la méthode document.getElementById('paragraph') et en manipulant sa valeur.
Maintenant que vous avez compris les bases de la manipulation DOM, allons de l'avant et implémentons la validation de formulaire.
Validation de formulaire avec JavaScript
Il existe différents types d'entrées que vous pouvez prendre d'un utilisateur. Le type de texte, le type d'e-mail, le type de mot de passe, les boutons radio et les cases à cocher sont parmi les plus courants que vous puissiez rencontrer. En raison de cette grande majorité de types d'entrée, vous devrez utiliser une logique différente pour valider chacun d'eux.
Avant d'aborder la validation, prenons un moment pour comprendre les formulaires HTML et leur importance. Les formulaires HTML sont l'un des principaux moyens d'interagir avec le site Web, car ils vous permettent de saisir vos données, d'appliquer des modifications, d'invoquer des fenêtres contextuelles, de soumettre des informations à un serveur, etc.
L'élément HTML <form> est utilisé pour créer ces formulaires destinés à l'utilisateur. Voici comment valider les entrées d'un formulaire HTML :
1. Validation des e-mails
Que vous construisiez un système d'authentification ou que vous récupériez simplement les e-mails des utilisateurs pour votre newsletter, il est important de valider l'e-mail avant de pouvoir le stocker dans votre base de données ou le traiter. Pour vérifier si un e-mail remplit toutes les conditions requises, vous pouvez utiliser une expression régulière .
HTML :
<input type="email" placeholder="[email protected]" id="email" required />JavaScript :
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. Validation du mot de passe
Les mots de passe sont une donnée cruciale qui nécessite un type spécial de validation pour assurer sa sécurité. Considérez un formulaire d'inscription comportant deux champs : les champs de mot de passe et de confirmation du mot de passe. Pour valider ces paires d'entrées, voici quelques éléments à prendre en compte :
- Le mot de passe doit comporter plus de 6 caractères.
- La valeur du mot de passe et le champ de confirmation du mot de passe doivent être identiques.
HTML :
<input type="password" placeholder="Enter your password" id="password" required />
<input type="password" placeholder="Enter your password" id="confirm-password" required />JavaScript :
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length < 6) {
alert('Password must be more than 6 characters long')
}3. Validation d'entrée radio
L'entrée radio HTML est un type spécial d'élément de contrôle graphique qui permet à l'utilisateur de choisir une seule option parmi un ensemble prédéfini d'options mutuellement exclusives. Un cas d'utilisation courant d'une telle entrée serait la sélection du sexe. Pour valider une telle saisie, vous devrez vérifier si au moins l'un d'entre eux est sélectionné.
Ceci peut être réalisé en utilisant les opérateurs logiques tels que l' opérateur AND ( && ) et NOT ( ! ) de cette manière :
HTML :
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<label for="others">Others</label>
<input type="radio" id="others" name="gender" value="others" />JavaScript :
const genders = document.getElementsByName("gender");
const validForm = false;
let i = 0;
while (!validForm && i < radios.length) {
if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert("Must check some option!");4. Sélectionnez Validation d'entrée
L'élément HTML <select> est utilisé pour créer une liste déroulante. Les balises <option> à l'intérieur de l'élément <select> définissent les options disponibles dans la liste déroulante. Chacune de ces balises <option> est associée à un attribut value.
Pour l'option par défaut ou initiale, vous pouvez définir sa valeur comme une chaîne vide afin qu'elle soit considérée comme une option invalide. Pour toutes les autres options, définissez un attribut de valeur approprié. Voici un exemple de la façon dont vous pouvez valider un élément d'entrée <select> :
HTML :
<select id="title" required>
<option value="">Select One</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>JavaScript :
const title = document.getElementById('title');
if (title.value = "") {
alert('Please select a title');
}5. Validation des cases à cocher
Les éléments d'entrée du type case à cocher sont affichés par défaut sous forme de cases qui sont cochées ou cochées lorsqu'elles sont activées. Une case à cocher vous permet de sélectionner des valeurs uniques à soumettre dans un formulaire. Les cases à cocher sont un choix courant pour l'entrée « accepter les termes et conditions ».
Pour savoir si une case est cochée ou non, vous pouvez accéder à l'attribut coché sur l'entrée de la case à cocher. Voici un exemple :
HTML :
<input type="checkbox" id="terms">
<label for="terms">I agree to the terms and conditions</label>JavaScript :
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Mieux vaut prévenir que guérir
Il est toujours recommandé de valider toutes les entrées que vous recevez d'un visiteur pour offrir une expérience sûre et sécurisée. Les pirates tentent toujours d'entrer des données malveillantes dans les champs de saisie pour effectuer des attaques de scripts intersites et des injections SQL.
Maintenant que vous comprenez comment valider vos entrées HTML, pourquoi ne pas essayer en créant un formulaire et en mettant en œuvre les stratégies que vous avez vues ci-dessus ?