Vérification de formulaire avec jQuery

Un bon formulaire est un formulaire où les éléments qui le compose sont vérifiés avant d’être envoyé au serveur.

Le but de ce tutoriel est de vous montrer un exemple de vérification et d’effet que l’on peut produire en javascript sur une validation de formulaire.

Je vous indique qu’il existe également des plugins très complet qui font ces vérifications, mais l’intérêt ici est de « manipuler » jQuery.

Prenons par exemple un formulaire simple :

[html]
<form action="traitement.php" id="myForm" method="post">
<p>
<label for="nom">Nom</label><br />
<input id="nom" name="nom" type="text" />
</p>
<p>
<label for="message">Message</label><br />
<textarea cols="20" id="message" name="message" rows="5"></textarea>
</p>
<p>
<input type="submit" value="Envoyer" />
</p>
</form>
[/html]

Il nous faut donc inclure deux fichiers javascript :

[html]
<script src="public/scripts/jquery.js" type="text/javascript"></script>
<script src="public/scripts/forms.js" type="text/javascript"></script>
[/html]

C’est donc ce fichier forms.js qui nous intéresse !

Bon, que souhaitons nous faire ?

• une fonction qui se déclenche lorsque l’on valide le formulaire,
• vérifier que les champs « nom » et « message » soient remplis
• rendre cette erreur « visuel » : ici on va mettre le label en rouge et également mettre la bordure gauche du p parent en rouge.

Allez, commençons notre fichier forms.js

[javascript]
$(document).ready(function() {
/* ce que l’on met ici agira dès que le DOM sera prêt */
});
[/javascript]

1/ Une fonction qui se déclenche lorsque l’on valide le formulaire

[javascript]
$(document).ready(function() {
$("#myForm").bind("submit", function(){
/* ce que l’on met ici s’effectura sur le "submit" du formulaire "myForm" */
});
});
[/javascript]

2/ Vérifier que les champs « nom » et « message » soient remplis

[javascript]
$(document).ready(function() {
$("#myForm").bind("submit", function(){
var bReturn = true;

if ( jQuery.trim($("#nom").val()).length==0 ) {
bReturn = false;
}

if ( jQuery.trim($("#message").val()).length==0 ) {
bReturn = false;
}

return bReturn;
});
});
[/javascript]

3/ Rendre cette erreur « visuel » : ici on va mettre le label en rouge et également mettre la bordure gauche du p parent en rouge.

[javascript]
$(document).ready(function() {
$("#myForm").bind("submit", function(){
var bReturn = true;

$("#nom").parent("p").css({borderLeft: ""});
$("label[for="nom"]").css({color: ""});
if ( jQuery.trim($("#nom").val()).length==0 ) {
$("#nom").parent("p").css({borderLeft: "2px solid red"});
$("label[for="nom"]").css({color: "red"});
bReturn = false;
}

$("#message").parent("p").css({borderLeft: ""});
$("label[for="message"]").css({color: ""});
if ( jQuery.trim($("#message").val()).length==0 ) {
$("#message").parent("p").css({borderLeft: "2px solid red"});
$("label[for="message"]").css({color: "red"});
bReturn = false;
}

return bReturn;
});
});
[/javascript]

Et voila !

Notez les manipulations particulièrement intéressantes avec jQuery à savoir :

• parent() pour récupérer un élément parent,
• [attr=xxxx] pour récupérer un élément à l’aide de ses attributs,
• …

Rappel : Javascript peut être désactivé, il est donc nécessaire de vérifier les données également en PHP.

DOWNLOAD :

• verification-de-formulaire-avec-jquery.zip