Inline form validation - un plugin de validation de formulaire jquery

Lors de la création d'un formulaire en ligne, vérifier que tous les champs sont remplis correctement peut être une véritable corvée. La pénibilité croit exponentiellement avec la taille du formulaire.

Heureusement, ce plug-in jquery permet de vous faciliter la tâche en ajoutant un contrôle sur chaque champ de votre formulaire. Il existe différents types de validateurs :

• requis
• longueur min et max
• nombre de checkbox à cocher
• égalité de deux champs (mot de passe par exemple)
• type de valeur (numérique...)
• ...

Il est aussi possible de valider le champ en fonction d'un retour Ajax, pour tester la disponibilité d'un pseudo par exemple. De plus, ce plug-in vous permet de créer vos propres validateurs.

Le rendu par défaut est plutôt agréable et est lui aussi personnalisable pour les fans de customisation.

La mise en place est assez simple, il suffit d'inclure les fichiers js requis

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-fr.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>

On insère ensuite le fichier css du thème que l'on veut utiliser

<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

On instancie le moteur de validation

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

Ensuite on associe à chaque champ son validateur, en utilisant l'attribut "class".

<h1>Formulaire de Test</h1>
<form id="monForm" method="post" action="#">
    <input value="" class="validate[required]" type="text" name="login" id="login" />
    <input type="submit"/>
</form>

Et voilà, votre validateur est en place. Il ne faut cependant pas oublier de faire les contrôles en PHP, au cas où des petits malins désactiveraient le javascript.

Site Officiel