Validation de Formulaire JavaScript : Guide du Débutant

Salut à toi, aspirant.e.s programmeur.se.s ! Aujourd'hui, nous allons plonger dans le monde passionnant de la validation de formulaire en JavaScript. En tant que quelqu'un qui enseigne la programmation depuis des années, je peux vous dire que c'est l'une des compétences les plus pratiques et importantes que vous apprendrez. Alors, c'est parti !

Qu'est-ce que la Validation de Formulaire ?

Avant de nous pencher sur le code, comprenons ce qu'est la validation de formulaire et pourquoi elle est importante. Imaginez que vous remplissez un formulaire pour commander une pizza en ligne. Vous ne voudriez pas commander accidentellement 1000 pizzas au lieu d'une, n'est-ce pas ? C'est là que la validation de formulaire entre en jeu - elle vérifie les données saisies par les utilisateurs pour s'assurer qu'elles sont correctes et dans le bon format.

Validation de Formulaire de Base

1. Vérification si un Champ est Vide

Commençons par la validation la plus basique - vérifier si un champ est vide. Voici un exemple simple :

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Le nom doit être rempli");
return false;
}
}

Dans ce code :

• Nous obtenons la valeur d'un champ nommé "fname" d'un formulaire nommé "myForm".
• Si la valeur est vide (une chaîne vide), nous affichons une alerte et retournons false, ce qui empêche le formulaire d'être soumis.

2. Validation de l'Entrée Numérique

Maintenant, assurons-nous qu'un champ contient uniquement des nombres :

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Entrée non valide");
return false;
}
}

Voici ce qui se passe :

• Nous obtenons la valeur d'un champ d'entrée avec l'ID "myNumber".
• Nous utilisons isNaN() pour vérifier si ce n'est pas un nombre.
• Nous vérifions également si le nombre est entre 1 et 100.
• Si l'une de ces conditions est vraie, nous affichons une alerte et retournons false.

Validation du Format des Données

1. Validation de l'Email

L'une des validations les plus courantes est de vérifier si une adresse email est dans le bon format. Voici comment nous pouvons le faire :

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Veuillez saisir une adresse email valide");
return false;
}
}

Cela peut sembler effrayant, mais analysons-le :

• Nous utilisons une expression régulière (regex) pour vérifier le format de l'email.
• La regex vérifie :
• Certains caractères qui ne sont pas des espaces ou des @ ([^\s@]+)
• Suivi d'un symbole @
• Suivi de plus de caractères qui ne sont pas des espaces ou des @
• Suivi d'un point
• Suivi de encore plus de caractères qui ne sont pas des espaces ou des @

2. Validation de la Date

Validons une date pour nous assurer qu'elle est au format MM/DD/YYYY :

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Veuillez saisir une date valide au format MM/DD/YYYY");
return false;
}
}

Cette regex est encore plus complexe, mais voici ce qu'elle fait :

• Elle vérifie :
• Un mois (01-12)
• Suivi d'un /
• Un jour (01-31)
• Un autre /
• Une année à 4 chiffres

Souvenez-vous, bien que cela vérifie le format, cela ne vérifie pas si la date est effectivement valide (comme le 30 février).

tout ensemble

Maintenant que nous avons vu des validations individuelles, combinons-les en un seul formulaire :

<form name="myForm" onsubmit="return validateForm()">
Nom : <input type="text" name="fname"><br>
Âge : <input type="text" id="myNumber"><br>
Email : <input type="text" id="myEmail"><br>
Date : <input type="text" id="myDate"><br>
<input type="submit" value="Soumettre">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Le nom doit être rempli");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("L'âge doit être un nombre entre 1 et 100");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Veuillez saisir une adresse email valide");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Veuillez saisir une date valide au format MM/DD/YYYY");
return false;
}
return true;
}
</script>

Dans cet exemple complet :

• Nous avons un formulaire avec des champs pour le nom, l'âge, l'email et la date.
• Le formulaire's onsubmit événement appelle validateForm().
• validateForm() appelle toutes nos fonctions de validation individuelles.
• Si une validation échoue, la soumission du formulaire est empêchée.

Conclusion

Félicitations ! Vous venez d'apprendre les bases de la validation de formulaire en JavaScript. Souvenez-vous, la validation n'est pas seulement pour prévenir les erreurs - c'est pour créer une meilleure expérience utilisateur. Comme vous continuez votre parcours en programmation, vous trouverez de nombreuses autres façons d'améliorer vos formulaires et de les rendre encore plus conviviaux.

Voici un tableau résumant les méthodes de validation que nous avons couvertes :

Méthode	Objectif	Exemple
Vérification de Champ Vide	Assurer que les champs obligatoires sont remplis	if (x == "")
Validation Numérique	Vérifier si l'entrée est un nombre et dans une plage	if (isNaN(x) || x < 1 || x > 100)
Validation Email	Vérifier le format de l'email	if (!regex.test(email))
Validation Format Date	Vérifier si la date est dans le bon format	if (!regex.test(date))

Continuez à pratiquer, et bientôt vous serez un magicien de la validation de formulaires ! Souvenez-vous, tous les programmeurs exceptionnels ont commencé exactement où vous êtes maintenant. Bon codage !

Credits: Image by storyset