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 ! 
)
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="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 :
2/ Imaginons une structure de formulaire comme ceci :
<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 :
$(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 :
<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.
Bon code à tous !
Articles qui peuvent vous intéresser :
- jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
- Facebox – Plugin jQuery – Des lightbox style Facebook
- jQuery – QRCode – Générez vos propres QRCodes
- Passage de jQuery 1.5.x vers jQuery 1.6
- Web Event #3 de Lyon – Retour
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Comme d’habitude, article très intéressant.
Je vais tester un peu cette méthode de création d’un site internet. Cela peut être efficace et améliorer le site.
Une question aussi, tu parlais dans un article de problèmes avec IE, mais comment en régler quand cela vient avec firefox?
Bonjour,
Concernant Firefox, tout dépend du problème. Avec jQuery, en utilisant les dernières versions il ne doit pas avoir de problème de compatibilité.
Bonjour,
Il va m’être très utile ce plugin jQuery !!
Merci
[...] jQuery – Validation – Plugin de validation de formulaire [...]