oujood.com

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

Dans ce document, nous allons examiner la validation de formulaire avec JavaScript en utilisant un exemple de formulaire d'inscription.

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.


1tpe

Regarder aussi nos cours :

Les balises universelles

Les balises univercelles : div et span...

fonction strcoll

Comparaison de chaînes localisées

Balise tfoot

Groupes du contenu de bas de page dans un tableau


Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci