Validation formulaire html.pdf


Aperçu du fichier PDF validation-formulaire-html.pdf

Page 1 2 3 4 5 6 7 8 9




Aperçu texte


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