Blogdevphp

Validation formulaire inline avec le plugin jQuery.validationEngine

2013-09-24 jquery

Il est important, de contrôler les données saisis par l'utilisateur.

Etant donné que ces informations seront stockées en base de données, on n'a pas droit à l'erreur.

Je ne vous apprends rien sur ce sujet, je le sais bien! Il y a un plugin, que j'apprécie tout particulièrement, Jquery Validation Engine. C'est un plugin Jquery, très complet et après l'avoir essayé, on l'adopte! 

Valider chaque champs d'un formulaire, avec ce plugin, devient plaisant !

Mise en route

Il faut commencer par l'inclusion des fichiers.

<!--Chargement de la librarie Jquery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 
<!--Chargement du plugin avec le fichier de langue-->
<script src="assets/js/jquery.validationEngine-fr.js" type="text/javascript" charset="utf-8"></script>
<script src="assets/js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
 
<!--Chargement du fichier css-->
<link rel="stylesheet" type="text/css" href="assets/css/validationEngine.jquery.css"/>

Il nous reste, par la suite, à cibler notre formulaire et instancier le validateur.

$(document).ready(function(){
    
    $(".form_societe").validationEngine();
}

Exemple

<form action="" method="post">

Nom Société : <input class="validate[required]" name="nom_societe" type="text"/>
Code Postal : <input class="validate[required,custom[onlyNumberSp]]" name="cp" type="text"/>
Ville : <input class="validate[required,custom[onlyLetterSp]]" name="ville" type="text"/>
Email Société : <input class="validate[required,custom[email]]" name="mail_societe" type="text"/>

</form>

Je pense que vous l'avez remarqué, la validation se définit avec l'attribut "class".

  • validate[required] : Le champ est obligatoire

  • validate[required,custom[onlyNumberSp]] : Le champ est obligatoire et ne doit contenir que des nombres

  • validate[required,custom[onlyLetterSp]] : Le champ est obligatoire et ne doit contenir que des lettres

  • validate[required,custom[email]] : Le champ est obligatoire et le mail doit être au bon format

En savoir plus

Les possibilités avec ce plugin sont légion ! La documentation vous présentera les nombreuses possibilités qui s'offre à vous 

comments powered by Disqus
Copyright © 2018 blogdevphp.fr - Tous droits réservés