Objet RealMedia
Ce chapitre décrit comment utiliser l'objet Real Audio et Real Vidéo.
Dans ce document, nous allons examiner la validation de formulaire avec JavaScript en utilisant un exemple de formulaire d'inscription.
Le tutoriel explore la validation JavaScript sur l'envoi avec une explication détaillée.
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.
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
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;
}
Dans ce qui suit nous examinons les différentes fonctions JavaScript qui vont servir pour la validation des champs de notre formulaire
Cette fonction appelle toutes les autres fonctions utilisées pour la validation.
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
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.
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
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
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
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
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
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
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.