Fichier PDF

Partage, hébergement, conversion et archivage facile de documents au format PDF

Partager un fichier Mes fichiers Boite à outils PDF Recherche Aide Contact



Validation formulaire html .pdf



Nom original: Validation formulaire html.pdf
Titre: Validation d’un formulaire HTML
Auteur: Abdallah EL Asmar

Ce document au format PDF 1.5 a été généré par Microsoft® Office Word 2007, et a été envoyé sur fichier-pdf.fr le 27/07/2014 à 23:51, depuis l'adresse IP 141.105.x.x. La présente page de téléchargement du fichier a été vue 571 fois.
Taille du document: 414 Ko (9 pages).
Confidentialité: fichier public




Télécharger le fichier (PDF)









Aperçu du document


Validation d’un formulaire HTML

Abdallah EL Asmar

La validation d’un formulaire –coté client– permet d’éviter l’envoi des données invalides au serveur,
elle constitue un premier contrôle de données qui doit être suivi par un deuxième contrôle au coté
serveur.
L’objectif de cet article est de présenter par des exemples quelques possibilités de valider un formulaire
–coté client–.
Considérons la page suivante :

Ecrire les scripts permettant de réaliser les contrôles suivants :
1. Au moment de chargement
a) Afficher la date courante et le temps avec le format : jour jj-mm-aaaa, hh:mm:ss
b) Placer le curseur dans le champ Numéro
2. Après qu’un champ perd le focus, vérifier qu’il existe une valeur de ce champ et que cette valeur
répond à une certaine condition ; si non, afficher un message concernant cette condition et
retourner le focus au champ:
a) La valeur du champ Numéro doit être un nombre entier positif.
b) La valeur du champ Nom doit être constituée des lettres avec la possibilité d’avoir plusieurs
mots séparés par des spaces ou « - ».
c) La valeur du champ Prénom doit être constituée seulement des lettres.
d) Le champ Date de naissance doit avoir une valeur valide avec le format jj/mm/aaa.
e) La valeur du champ Téléphone doit avoir le format : 99-999999 (huit chiffres dont le premier
est un zéro ou 7).
f) La valeur par défaut de ville doit être effacée quand le champ reçoit le focus ; la valeur saisie
doit être une des valeurs suivantes : Beyrouth, Tripoli, Byblos, Saida, Tyr.
3. Assurer qu’on ne peut pas envoyer les données du formulaire si une des conditions précédentes
n’est pas vérifiée.

www.facebook.com/a.asmar.isae

Page 1

Validation d’un formulaire HTML

Abdallah EL Asmar

1. Utilisation de JavaScript pour la validation
Code HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Validation d'un formulaire</title>
<script src = "validerForm.js"></script>
</head>
<body style="font-size:20px" onload= "document.getElementById('champ1').focus(); afficherDate()">
<h2>Welcome</h2>
<form onsubmit="return valider()" method ="POST">
<fieldset style="background: #DFF2FF ;">
<legend style="background: #77B5FE ;"> <B>Date courante</B></LEGEND>
<input type="text" name="datecourante" id= "champ0" size="30" readonly>
</fieldset>
<fieldset style="background: #DFF2FF ;">
<legend style="background: #77B5FE ;"> <B>Formulaire d'inscription</B></LEGEND>
<table>
<tr> <td> Numéro</td>
<td><input type="text" name="numero" id= "champ1" onblur = "validNo()" size="20">
</td></tr>
<tr> <td> Nom</td>
<td><input type ="text" name = "nom" id= "champ2" onblur = "validNom()" size= "20">
</td></tr>
<tr> <td> Prénom</td>
<td><input type="text" name="prenom" id= "champ3" onblur="validPrenom()" size="20" >
</td></tr>
<tr> <td> Date de naissance</td>
<td><input type="text" name="naissance" id= "champ4" onblur ="validNaissance()" >
</td></tr>
<tr> <td> Téléphone</td>
<td><input type="text" name="tel" id= "champ5" onblur="validTel()"size="20"></td></tr>
<tr> <td> Ville</td>
<td><input type="text" name="ville" id= "champ6" value = "Ville"
onfocus="this.value=''" onblur="validVille()" size="20"></td></tr>
<tr> <td><input type="submit" value="Envoyer"></td><td></td></tr>
</table>
</fieldset>
</form>
</body>
</html>

www.facebook.com/a.asmar.isae

Page 2

Validation d’un formulaire HTML

Abdallah EL Asmar

validerForm.js
function afficherDate() {
var listjours = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
var datecourante = new Date();
var jour = datecourante.getDay();
var nojour = datecourante.getDate();
nojour = (nojour <10)? "0"+nojour : ""+nojour;
var mois = datecourante.getMonth() + 1;
mois = (mois <10)? "0"+mois : ""+mois;
var an = datecourante.getFullYear();
var heure = datecourante.getHours();
heure = (heure <10)? "0"+heure : ""+heure;
var minute = datecourante.getMinutes();
var seconde = datecourante.getSeconds();
var val = listjours[jour] + " " + nojour + "-" + mois + "-" + an + ", "+ heure + ":" + minute + ":" +
seconde;
document.getElementById('champ0').value = val;
}
function validNo (){
var num = document.getElementById('champ1').value;
if ( ! isNaN(num) ) {
var ent = parseInt(num);
if (ent == num && ent > 0){
return true; }
}
alert ("Entrez un entier positif");
document.getElementById('champ1').focus();
return false;
}
function validNom(){
var vnom = document.getElementById('champ2').value;
var reg = /^([a-zA-Z]+(\s|-))*([a-zA-Z])+$/;
if (vnom.match(reg)) {
return true;
}
alert ("Entrez un ou plusieurs mots séparés par space ou '-'");
document.getElementById('champ2').focus();
return false;
}
function validPrenom(){
var vpre = document.getElementById('champ3').value;
var reg = /^[a-zA-Z]+$/;
if (vpre.match(reg)) {
return true;}
alert ("Entrez un seul mot");
document.getElementById('champ3').focus();
return false;
}

www.facebook.com/a.asmar.isae

Page 3

Validation d’un formulaire HTML

Abdallah EL Asmar

function validNaissance() {
var vnaiss = document.getElementById("champ4").value;
var reg = /(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/;
if (vnaiss.match(reg)) {
return true;
}
alert ("Entrez une date correcte jj/mm/aaaa");
document.getElementById('champ4').focus();
return false;
}
function validTel() {
var vtel = document.getElementById("champ5").value;
var reg = /^((0[1-9])|(7[0-9]))-[0-9]{6}$/;
if (vtel.match(reg)) {
return true;
}
alert ("Entrez un numéro téléphone correct 99-999999");
document.getElementById('champ5').focus();
return false;
}
function validVille(){
var villes = ['Beyrouth', 'Tripoli', 'Byblos', 'Saida', 'Tyr'];
var vvil = document.getElementById("champ6").value;
var position = villes.indexOf(vvil);
if (position >= 0) {
return true;
}
alert ("Entrez une valeur parmi : Beyrouth, Tripoli, Byblos, Saida, Tyr");
document.getElementById('champ6').focus();
return false;
}
function valider(){
if (validNo()){
if (validNom()){
if (validPrenom()){
if (validNaissance()){
if (validTel()){
if (validVille()){
return true;
}
}
}
}
}
}
return false;
}

www.facebook.com/a.asmar.isae

Page 4

Validation d’un formulaire HTML

Abdallah EL Asmar

2. Utilisation de JavaScript pour la validation -Utilisation des innerHTML
Au lieu d’utiliser Alert() pour afficher un message , on utilise innerHTML pour afficher le message
juste au près du champ concerné. De même, on peut supprimer onblur() et effectuer la validation au
moment de l’envoi (submit appuyé).
Code HTML
Associer à chaque champ, un élément:
<td><span id="span1" class="sp"></span></td></tr>
L’attribut class permet d’associer le même style pour les innerHTML.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Validation d'un formulaire</title>
<script src = "validerForm.js"></script>
<style type="text/css">
.sp {
color :red;
font-size :16px;
}
</style>
</head>
<body style="font-size:20px" onload= "document.getElementById('champ1').focus(); afficherDate()">
<h2>Welcome</h2>
<form onsubmit="return valider()" method ="POST">
<fieldset style="background: #DFF2FF ;">
<legend STYLE="background: #77B5FE ;"> <B>Date courante</B></LEGEND>
<input type="text" name="datecourante" id= "champ0" size="30" readonly>
</fieldset>
<fieldset style="background: #DFF2FF ;">
<legend STYLE="background: #77B5FE ;"> <B>Formulaire d'inscription</B></LEGEND>
<table>
<tr> <td> Numéro</td>
<td><input type="text" name="numero" id= "champ1" onblur="validNo()" size="20"></td>
<td><span id="span1" class="sp"></span></td></tr>
<tr> <td> Nom</td>
<td><input type ="text" name = "nom" id= "champ2" onblur="validNom()" size= "20" ></td>
<td><span id="span2" class="sp"></span></td></tr>
<tr> <td> Prénom</td>
<td><input type="text" name="prenom" id= "champ3" onblur="validPrenom()" size="20" ></td>
<td><span id="span3" class="sp"></span></td></tr>
<tr> <td> Date de naissance</td>
<td><input type="text" name="naissance" id= "champ4" onblur="validNaissance()"></td>
<td><span id="span4" class="sp"></span></td></tr>

www.facebook.com/a.asmar.isae

Page 5

Validation d’un formulaire HTML

Abdallah EL Asmar

<tr> <td> Téléphone</td>
<td><input type="text" name="tel" id= "champ5" onblur="validTel()" size="20"></td>
<td><span id="span5" class="sp"></span></td></tr>
<tr> <td> Ville</td>
<td><input type="text" name="ville" id= "champ6" value = "Ville" onblur="validVille()"
onfocus="this.value=''" size="20"></td>
<td><span id="span6" class="sp"></span></td></tr>
<tr> <td><input type="submit" value="Envoyer"></td><td></td><td></td></tr>
</table>
</fieldset>
</form>
</body>
</html>
validerForm.js
 Dans toutes les fonctions qui utilisent Alert(), remplacer Alert (‘message’); par
document.getElementById('id de span').innerHTML = 'message'; et
ajouter avant return true ; le code :
document.getElementById('id-de-span').innerHTML = '';
Par exemple :
function validNo (){
var num = document.getElementById('champ1').value;
if ( ! isNaN(num) ) {
var ent = parseInt(num);
if (ent == num && ent > 0){
document.getElementById('span1').innerHTML = '';
return true;
}
}
// alert ("Entrez un entier positif");
document.getElementById('span1').innerHTML = 'Entrez un entier positif';
document.getElementById('champ1').focus();
return false;
}
 Modifier la function valider() afin d’afficher tous les messages d’erreurs:
function valider(){
var f1= validNo();
var f2= validNom();
var f3= validPrenom();
var f4= validNaissance();
var f5= validTel();
var f6= validVille();
return f1 && f2 && f3 && f4 && f5 && f6;
}

www.facebook.com/a.asmar.isae

Page 6

Validation d’un formulaire HTML

Abdallah EL Asmar

3. Utilisation des contrôles offerts par HTML5
Parmi les possibilités offertes par HTML5, on peut citer les nouveaux types de la balise input
(date, number, time,.. ) et les attributs required, pattern, autofocus et
placeholder de la balise input.
 L’attribut required spécifie qu'un champ doit avoir une valeur avant d'envoyer le
formulaire (required ="required" ou tout simplement required). Si aucune
valeur n’est spécifiée au moment d’envoi, un message prédéfini est affiché : « Please fill
out this field » ou « This is required field » ça dépend du navigateur.
 L’attribut pattern spécifie une expression régulière qui est vérifiée par rapport à la
valeur du champ avant d'envoyer le formulaire (pattern = "^[0-9]{3}$"). Si la
valeur saisie ne correspond pas au pattern au moment d’envoi, un message prédéfini est
affiché : « Please match the requested format » ou « you must use this format » ça
dépend du navigateur.
 L’attribut autofocus spécifie qu'un champ doit obtenir automatiquement le focus lorsque
la page est chargée (autofocus ="autofocus" ou tout simplement autofocus)
 L'attribut placeholder spécifie une brève description de la valeur attendue d'un
champ. Cette description s'affiche dans le champ lorsqu'il est vide et disparaît lorsque le
champ obtienne le focus ou l’utilisateur commence à saisir une valeur.
 Le type number spécifie que la valeur d’un champ doit être un nombre ; avec ce type, on
peut utiliser les attributs min, max et step.
 L'attribut title spécifie un message qui apparait quand la souris passe au-dessus du
champ. Ce message est affiché aussi avec les messages prédéfinis des attributs
required et pattern.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="language" content="fr">
<title>Validation d'un formulaire</title>
<script>
function afficherDate() {
var listjours = ["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"];
var datecourante = new Date();
var jour = datecourante.getDay();
var nojour = datecourante.getDate();
nojour = (nojour <10)? "0"+nojour : ""+nojour;
var mois = datecourante.getMonth() + 1;
mois = (mois <10)? "0"+mois : ""+mois;
var an = datecourante.getFullYear();
var heure = datecourante.getHours();

www.facebook.com/a.asmar.isae

Page 7

Validation d’un formulaire HTML

Abdallah EL Asmar

heure = (heure <10)? "0"+heure : ""+heure;
var minute = datecourante.getMinutes();
var seconde = datecourante.getSeconds();
var val = listjours[jour] + " " + nojour + "-" + mois + "-" + an + ", "+ heure + ":" +
minute + ":" + seconde;
document.getElementById('champ0').value = val;
}
</script>
</head>
<body style="font-size:20px" onload= "afficherDate()">
<h2>Welcome</h2>
<form method ="POST">
<fieldset style="background: #DFF2FF ;">
<legend STYLE="background: #77B5FE ;"> <B>Date courante</B></legend>
<input type="text" name="datecourante" id= "champ0" size="30" readonly>
</fieldset>
<fieldset style="background: #DFF2FF ;">
<legend STYLE="background: #77B5FE ;">
<B>Formulaire d'inscription</B>
</legend>
<table>
<tr> <td> Numéro</td>
<td><input type="number" name="numero" id= "champ1" min="1" size="20"
autofocus="autofocus" required="required"
title="Entrer un entier positif"></td></tr>
<tr> <td> Nom</td>
<td><input type ="text" name = "nom" id= "champ2"
pattern="^([a-zA-Z]+(\s|-))*([a-zA-Z])+$" required="required"
title="Entrer un ou plusieurs mots séparés par space ou '-'"
size= "20" ></td></tr>
<tr> <td> Prénom</td>
<td><input type="text" name="prenom" id= "champ3"
pattern="^[a-zA-Z]+$"
required="required" title="Entrer un seul mot" size="20" ></td></tr>
<tr> <td> Date de naissance</td>
<td><input type="text" name="naissance" id= "champ4"
pattern="(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})"
required="required" title="Entrez une date correcte jj/mm/aaaa"></td></tr>
<tr> <td> Téléphone</td>
<td><input type="text" name="tel" id= "champ5"
pattern="^((0[1-9])|(7[0-9]))-[0-9]{6}$" required="required"
title="Entrez un numéro téléphone correct 99-999999" size="20"></td></tr>

www.facebook.com/a.asmar.isae

Page 8

Validation d’un formulaire HTML

Abdallah EL Asmar

<tr> <td> Ville</td>
<td><input type="text" name="ville" id= "champ6" placeholder = "Entrer une Ville"
pattern="Beyrouth|Tripoli|Byblos|Saida|Tyr" required="required"
title="Entrez une valeur parmi : Beyrouth, Tripoli, Byblos, Saida, Tyr"
size="20"></td></tr>
<tr> <td><input type="submit" value="Envoyer"></td><td></td></tr>
</table>
</fieldset>
</form>
</body>
</html>

www.facebook.com/a.asmar.isae

Page 9


Documents similaires


Fichier PDF validation formulaire html
Fichier PDF rtgveryb
Fichier PDF partie i correction
Fichier PDF experimentaldesign
Fichier PDF formulaire evenement
Fichier PDF gestion dynamique des tables html en javascript


Sur le même sujet..