jQuery – Validation – Plugin de validation de formulaire

On a toujours besoin de vérifier et faire valider nos formulaires pour nos sites internet. Alors aujourd’hui, je vous présente un plugin jQuery qui va vous permettre de procéder plus facilement à la première couche de filtre coté client pour vos formulaires (une couche qui n’empêche pas de devoir en ajouter une coté serveur hein ! ;))

validation-de-formulaire-jquery-js

Rendez-vous donc sur github pour télécharger le plugin et vous pouvez visionner les démo ici si vous le souhaitez.

Alors comment fonctionne ce plugin de validation de formulaire pour jQuery :

1/ Intégration de la librairie jQuery et du plugin :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

On peut voir que l’on intègre un fichier js de langue, pour le Français, il suffit d’appeler le fichier fr à la place, comme ceci :

<script src="js/jquery.validationEngine-fr.js" type="text/javascript" charset="utf-8"></script>

2/ Imaginons une structure de formulaire comme ceci :

<form action="traitement.php" method="post" id="validate_form">
<input value="someone@nowhere.com" type="text" name="email" id="email" />
<input value="2010-12-01" type="text" name="date" id="date" />
<input value="too many spaces obviously" type="text" name="special" id="special" />
<input type="submit" value="envoyer" name="send" />
</form>

3/ nous allons donc activer la validation sur le formulaire comme ceci :

<script>
$(document).ready(function(){
    $("#validate_form").validationEngine();
   });
</script>

4/ Il suffira de mettre les conditions de validation dans les attributs « class » de vos balises input, ce qui peut donner ceci :

<form action="traitement.php" method="post" id="validate_form">
<input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
<input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />
<input type="submit" value="envoyer" name="send" />
</form>

Et voilà, vous avez votre formulaire équipé d’un filtre de validation via jQuery. Cet exemple, permet d’obliger l’internaute à entrer une adresse e-mail requise et valide, une date requise et valide, ainsi que du texte requis et composé essentiellement de lettre et de chiffres.

Toutes les options sont disponibles sur la documentation du plugin, disponible ici.

Source

Bon code à tous !

Articles qui peuvent vous intéresser :

Comments
  1. Maude@Femme de ménage
  2. LudiKadmin

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*