Avant toute chose, je souhaite vous mettre en garde : Il est toujours possible pour un utilisateur de désactiver le Javascript, il n’est donc pas très judicieux de se baser sur ces données comme étant fiables. (Un petit script de vérification PHP est donc à rajouter, mais ce n’est pas l’objet du tuto). Le fait d’avoir une vérification Javascript permet dans un premier temps d’alléger la navigation du visiteur. En effet celui-ci ne sera pas obligé d’attendre une nouvelle requête vers le serveur, étant donné que tout la vérification s’effectue sur le poste du client.
Vous pouvez dés à présent, télécharger Jquery (J’utilise la version 1.2.6, ce plugin fonctionne probablement avec les versions inférieures mais contient quelques bugs sur la nouvelle version 1.3.1) et la première version du plugin FormValidation(1.1.1).
Création du document HTML
Créez un nouveau fichier HTML que vous nommerez formulaire.html avec ceci :
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="fr-FR" />
<title>Vérification de formulaire</title>
<!-- IMPORT Feuilles de styles -->
<link rel="stylesheet" type="text/css" href="feuilleDeStyle.css" media="all"/>
<!-- IMPORT Javascript -->
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.formvalidation.js"></script>
</head>
<body>
<form id="formulairecontact" method="post" action="formulaire.html" >
<fieldset>
<legend>Formulaire de contact</legend>
<label for="nom">Nom</label>
<input type="text" name="nom" id="nom" value=""/>
<label for="email">Email</label>
<input type="text" name="email" id="email" value=""/>
<label for="sujet">Sujet</label>
<select name="sujet" id="sujet">
<option>Séléctionnez votre choix</option>
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
<option>Choix 4</option>
<option>Choix 5</option>
</select>
<label for="message">Message</label>
<textarea rows="10" cols="25" name="message" id="message"></textarea>
<button>Envoyer</button>
</fieldset>
</form>
</body>
</html>
Voilà, il s’agit juste d’HTML. je fais simplement un import des 2 fichiers Javascript Jquery et son plugin (attention à l’ordre) et d’une feuille de style que je retoucherais après. Mon formulaire est sinon assez banal avec pour chaque élément input, select, et textarea un attribut id et un attribut name. La balise
Faire appel au plugin
Pour faire appel à mon plugin et le relier à mon formulaire, nous avons juste à l’initialiser en reprenant l’Id du formulaire (ici « formulairecontact »). Voici comment procéder, recopiez ses lignes de code juste après l’importation du plugin FormValidation. Ces lignes seront éxécutées lorsque la page aura été complètement chargée dans le navigateur (et l’arbre DOM mis en mémoire).
<script type="text/javascript">
$(document).ready(function(){
$("#formulairecontact").formValidation({
alias : "name",
required : "accept",
err_list : true
});
});
</script>
Modifier le formulaire
Nous allons à présent modifier le formulaire et signaler en HTML quels sont les champs requis, le type de contenu attendu. Pour cela nous allons ajouter des attributs qui n’ont pas de signification en HTML (et rendront donc votre page invalide). Cependant ils vous faciliteront grandement la tâche lors de la création de vos formulaires…Les 3 attributs que nous allons utilisez sont les suivants:
- required : (true ou false(par défault)) cet attribut informe si un champs doit être rempli. Tous nos champs seront en required= »true ».
- mask : La valeur de cet attribut correspond au type de données que l’on attend (téléphone, mail, site, image, code postal…), la liste est définie dans le plugin (au tout début). Je vous conseil d’y aller jeter un oeil… vous pouvez bien évidemment créer aussi vos propres masques.
- defval : attribut qui donne un renseignement sur la valeur par défaut du champ. La valeur finale doit donc être différente pour être validée (ex: ‘Tapez votre message ici’). Il est néanmoins essentiel d’attribuer la même variable à l’attribut value, sinon rien ne s’affichera.
Voici ce que cela peut donner:
<form id="formulairecontact" method="post" action="formulaire.html" >
<fieldset>
<legend>Formulaire de contact</legend>
<label for="nom">Nom</label>
<input required="true" type="text" name="nom" id="nom" value=""/>
<label for="email">Email</label>
<input type="text" mask="email" required="true" name="email" id="email" value=""/>
<label for="sujet">Sujet</label>
<select required="true" defval="Séléctionnez votre choix" name="sujet" id="sujet">
<option>Séléctionnez votre choix</option>
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
<option>Choix 4</option>
<option>Choix 5</option>
</select>
<label for="message">Message</label>
<textarea rows="10" cols="25" required="true" name="message" id="message"></textarea>
<button>Envoyer</button>
</fieldset>
</form>
J’avoue que le fait de rajouter des attributs inexistants dans un fichier qui plus est, est un document xHTML n’est pas sémantiquement très correct. Mais ça a le mérite de vous éviter quelques galères pour la validation de vos formulaires.
Enfin nous avons fini notre validation de formulaire (si si…). Je vous l’accorde c’est pour l’instant très moche. Il reste encore quelques choses à modifier et à ajouter (traduire le plugin, le styliser et annoncer les erreurs autrement que dans une popup…).
Amélioration du Plugin
Tout d’abord, il faut veiller à traduire le plugin. Voici les quelques lignes qui nous dérangent : ligne 97, 102, 103 et 104.
Ensuite nous allons faire en sorte que le message d’erreur ne s’affiche plus dans un vulgaire Alert ligne 117. L’idée est ici de remplir un paragraphe class= »error ». Initialement vide dans le code html comme ceci:
<legend>Formulaire de contact</legend> <p class="error"><br /></p> <p class="notice">Veuillez patienter</p> <label for="nom">Nom</label>
Avec les propriétés CSS suivantes (dans le fichier feuilledestyle.css). D’ailleurs j’en profite pour styliser les champs du formulaire qui sont faux (Le plugin , lors de la validation change leurs attributs class à « invalidInput« ).
.invalidInput, .error{
color:#8a1f11;
background-color:#fbe3e4;
}
.error,.notice{
padding:0.5em;
margin:0.5em;
}
.error{
border:2px solid #8a1f11;
display:none;
}
.notice {
background-color:#FFF6BF;
color:#514721;
border:2px solid #FFD324;
display:none;
}
Reprenons maintenant notre plugin formValidation et réécrivons cette ligne 117 afin d’afficher le contenu des erreurs dans le paragraphe
.
Cela nous donne ce code, que vous pouvez remplacer par les lignes 116 et 117:
if (!frm && settings['display_alert']){
$("form .error").html(settings['err_message'] + err_list);
if ($("form .error").is(":hidden")){
$("form .error").slideDown("slow");
}
}
else{
if ($("form .notice").is(":hidden")){
$("form .notice").slideDown("slow");
}
}
Le code est assez parlant, si le formulaire contient des erreurs alors nous mettons notre variable avec les erreurs dans le paragraphe .error . S’il est en display:none; (par défault en CSS) Alors on l’affiche avec l’effet déroulant slideDown. Enfin s’il n’y a pas d’erreurs, on affiche le paragraphe qui indique à l’utilisateur de patienter (en attendant que la page se rafraîchisse). Comme vous pouvez le voir si vous avez testé ce code, les erreurs s’affichent sans retour à la ligne, ce qui n’est pas très élégant: Modifiez donc les lignes dans les fonctions required, mask et equal, lors de l’ajout de l’erreur à la variable err_list rajouter une balise
. Comme ceci par exemple pour la fonction required :
err_list += '<br />» "' + obj.attr(settings['alias']) + '" ' + err_msgs['required'] + '\n';
Voila le tuto semble se terminer. Il ne reste plus qu’à rendre le formulaire un peu plus agréable en CSS. Voici ma proposition (feuilledestyle.css):
.invalidInput, .error{
color:#8a1f11;
background-color:#fbe3e4;
}
.error,.notice{
padding:0.5em;
margin:0.5em;
}
.error{
border:2px solid #8a1f11;
display:none;
}
.notice {
background-color:#FFF6BF;
color:#514721;
border:2px solid #FFD324;
display:none;
}
form{
width:500px;
margin:auto;
background-color:#e5e5e5;
border-radius:1em; /*Trop cool pour IE 
*/
-moz-border-radius:1em; /*Trop cool pour IE */
}
form *{
font-size:1.0em;
font-family:georgia;/*on my mind!!*/
}
form fieldset{
border:none;
}
form legend{
font-size:2em;
color:#777;
margin-top:0.3em;
}
form label{
display:block;
float:left;
width:150px;
text-align:right;
}
form input, form select, form textarea{
width:300px;
margin-bottom: 1em;
margin-left:0.5em;
}
form button{
position:relative;
left:160px;
}
Merci pour votre attention! Je suis preneur si vous pouvez améliorer mon CSS!
Vous avez peut être manqué ces articles :
