logo oujood
🔍

Validation de formulaire JavaScript Ă  l'aide d'un exemple de formulaire d'inscription

OUJOOD.COM

Form Validation

Le tutoriel explore la validation JavaScript sur l'envoi avec une explication détaillée.

Comment définir ces validations

Il s'agit de crĂ©er des fonctions JavaScript (une pour chaque champ de saisie dont la valeur doit ĂȘtre validĂ©e) qui vĂ©rifieront que la valeur soumise par l'utilisateur est validĂ©e.
Toutes ces fonctions sont appelées par une autre fonction.
Cette derniĂšre place le focus sur le champ de saisie jusqu'Ă  ce que l'utilisateur fournisse une valeur valide.
Quand l'utilisateur le fait, il peut continuer et fournir une valeur au prochain champ disponible.
La derniÚre fonction JavaScript créée est appelée lorsque l'événement onsubmit du formulaire se produit.

Exemple de code HTML du formulaire d'inscription

Code

📋 Copier le code 

<!DOCTYPE html>
<html lang="fr"><head>
<meta charset="utf-8">
<title>Exemple de formulaire d'inscription 
avec validation JavaScript</title>
<meta name="keywords" content="exemple, JavaScript Form 
Validation, Sample registration form" />
<meta name="description" content="Ce document est un exemple 
de validation de formulaire avec JavaScript utilisant 
un exemple de formulaire d'inscription. " />
<link rel='stylesheet' href='style.css' type='text/css' />
<script src="form-validation.js"></script>
</head>
<body onload="document.registration.userid.focus();">
<h1>Formulaire d'inscription</h1>
<p>Utilisez la touche de tabulation pour passer d'un champ de saisie 
Ă  un autre.</p>.
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">
ID de l'utilisateur:</label></li>
<li><input type="text" name="userid" size="12" />
</li>
<li><label for="passid">Mot de passe:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Nom:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Adresse:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Payé:</label></li>
<li><select name="country">
<option selected="" value="Default">( Veuillez sélectionner un pays)
</option>
<option value="AF">Australie</option>
<option value="AL">Canada</option>
<option value="FR">France</option>
<option value="DZ">Indie</option>
<option value="AS">Russie</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">Code ZIP :</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sexe:</label></li>
<li><input type="radio" name="msex" value="Male" />
<span>Male</span></li>
<li><input type="radio" name="fsex" value="Female" />
<span>Femelle</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="fr" checked />
<span>Français</span></li>
<li><input type="checkbox" name="nonen" value="nofr" />
<span>Non Français</span></li>
<li><label for="desc">A propos:</label></li>
<li><textarea name="desc" id="desc">
</textarea></li>
<li><input type="submit" name="submit" value="Envoyer" /></li>
</ul>
</form>
</body>
</html>

Le fichier form-validation.js est le fichier JavaScript externe qui contient le code JavaScript utilisé pour valider le formulaire. style.css est la feuille de style contenant les styles du formulaire. Notez que pour la validation, la fonction JavaScript contenant le code à valider est appelée par l'événement onSubmit du formulaire.

Pour les besoins de la démonstration, nous avons pris six pays seulement. Vous pouvez ajouter n'importe quel nombre de pays dans la liste.

Code CSS de l'exemple de formulaire d'inscription Ă  mettre dans le fichier : style.css

Code

📋 Copier le code 

h1 {
margin-left: 70px;
}
form li {
list-style: none;
margin-bottom: 5px;
}
form ul li label{
float: left;
clear: left;
width: 100px;
text-align: right;
margin-right: 10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}
form ul li input, select, span {
float: left;
margin-bottom: 10px;
}
form textarea {
float: left;
width: 350px;
height: 150px;
}
[type="submit"] {
clear: left;
margin: 20px 0 0 230px;
font-size:18px
}
p {
margin-left: 70px;
font-weight: bold;
}

Code JavaScript pour la validation

Dans ce qui suit nous examinons les différentes fonctions JavaScript qui vont servir pour la validation des champs de notre formulaire

Fonction JavaScript qui est appelée sur onSubmit

Cette fonction appelle toutes les autres fonctions utilisées pour la validation.

Code

📋 Copier le code 

function formValidation()
{
var uid = document.registration.userid;
var passid = document.registration.passid;
var uname = document.registration.username;
var uadd = document.registration.address;
var ucountry = document.registration.country;
var uzip = document.registration.zip;
var uemail = document.registration.email;
var umsex = document.registration.msex;
var ufsex = document.registration.fsex; if(userid_validation(uid,5,12))
{
if(passid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{ 
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
}
}}}}}}}
return false;
}

Ce code est le code de la fonction globale qui va appellera toutes les fonctions de validation des différents champs dont la validation et nécessaire, que nous allons voir une par une dans ce que suit

Fonction JavaScript pour valider le ID de utilisateur

Code

📋 Copier le code 

function userid_validation(uid,mini,maxi)
{
var uid_len = uid.value.length;
if (uid_len == 0 || uid_len >= maxi || uid_len < mini)
{
alert("L'ID utilisateur ne doit pas ĂȘtre vide / la longueur 
doit ĂȘtre comprise entre "+mini+" et "+maxi".);
uid.focus();
return false;
}
return true;
}

Le code ci-dessus vérifie si le champ de saisie userid contient une chaßne de 5 à 12 caractÚres. Si ce n'est pas le cas, il affiche une alerte.

Fonction javaScript pour valider le mot de passe

Code

📋 Copier le code 

function passid_validation(passid,mini,maxi)
{
var passid_len = passid.value.length;
if (passid_len == 0 ||passid_len >= maxi || passid_len < mini)
{
alert("Le mot de passe ne doit pas ĂȘtre vide / sa longueur doit ĂȘtre
 comprise entre "+mini+" et "+maxi);
passid.focus();
return false;
}
return true;
}

Le code ci-dessus est utilisé pour valider le mot de passe (il doit avoir une longueur de 7 à 12 caractÚres). Si ce n'est pas le cas, il affiche une alerte.

Code JavaScript pour la validation du nom d'utilisateur

Code

📋 Copier le code 

function allLetter(uname)
{ 
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert("Le nom d'utilisateur doit comporter uniquement des caractĂšres
 alphabétiques non accentué est pas de nombres");
uname.focus();
return false;
}
}

Le code ci-dessus vérifie si le champ de saisie du nom de l'utilisateur contient uniquement des caractÚres alphabétiques. Si ce n'est pas le cas, il affiche une alerte.

Code JavaScript pour valider l'adresse de l'utilisateur

Code

📋 Copier le code 

function alphanumeric(uadd){ 
var letters = /^[0-9a-zA-Z]+$/;
if(uadd.value.match(letters)){
return true;
}
else{
alert("Votre adresse doit contenir uniquement des caractĂšres
 alphanumériques.");
uadd.focus();
return false;
}}

Le code ci-dessus vérifie si le champ de saisie de l'adresse de l'utilisateur contient des caractÚres alphanumériques. Si ce n'est pas le cas, il affiche une alerte

Code JavaScript pour la validation du pays

Code

📋 Copier le code 

function countryselect(ucountry){
if(ucountry.value == "Default"){
alert('SĂ©lectionnez votre pays dans la liste');
ucountry.focus();
return false;
}else{
return true;
}
}

Le code ci-dessus vérifie si un pays est sélectionné dans la liste donnée. Si non il affiche une alerte.

Code JavaScript pour la validation du code ZIP

Code

📋 Copier le code 

function allnumeric(uzip){ 
var numbers = /^[0-9]+$/;
if(uzip.value.match(numbers)){
return true;
}
else{
alert('Le code postal doit comporter uniquement des caractĂšres 
numériques');
uzip.focus();
return false;
}
}

Ce code vérifie si un code postal a une valeur numérique. Si ce n'est pas le cas, il affiche une alerte.

Code JavaScript pour valider le format de l'adresse e-mail

Code

📋 Copier le code 

function ValidateEmail(uemail)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(uemail.value.match(mailformat))
{
return true;
}
else
{
alert("Vous avez saisi une adresse email non valide!");
uemail.focus();
return false;
}
}
Ce code vérifie si un format d'email valide est fourni. Si ce n'est pas le cas, il affiche une alerte.

Code JavaScript pour la validation du genre

Code

📋 Copier le code 

function validsex(umsex,ufsex){
x=0;

if(umsex.checked){
x++;
} if(ufsex.checked){
x++; 
}
if(x==0){
alert('Sélectionnez le sexe masculin ou féminin');
umsex.focus();
return false;
}
else{
alert('Votre inscription s'est terminée avec succÚs');
window.location.reload()
return true;}
}

Ce code vérifie si un sexe est sélectionné. Si non, il affiche une alerte. Si le sexe est sélectionné, il génÚre une alerte indiquant que le formulaire a été soumis avec succÚs et il recharge le formulaire.

VoilĂ  notre tutoriel est terminĂ©, mais il est loin d’ĂȘtre complet.
Vous pouvez le modifier et le compléter conformément à vos besoins.

Si vous avez besoin d’un formulaire plus complet et que vous ne disposez pas de temps pour le faire ou que ne pouvez pas le faire pour une raison vous concernant, n’hĂ©siter pas de nous contacter et nous verrons comment est ce que on peut vous aider pour le faire.