jQuery Form Validation Plugin

Implémentation

2 fichiers son nécessaires au bon fonctionnement de ce plugin, la librairie jquery, et le fichier js du plugin:

/** jQuery Inclusion **/
<script type="text/javascript" src="Chemin_vers/jQuery.js"></script>
 
/** Plugin Inclusion **/
<script type="text/javascript" src="Chemin_vers/jquery-validate.js"></script>

Comme ce plugin marche avec les formulaires, l'étape suivante consiste à écrire le code html de celui que vous vouez valider. La règle à suivre est simple, il suffit d'ajouter la class='required' à chaque élément qui devra être remplis obligatoirement par l'utilisateur (input, select, textarea...).

<form id="formid" action="" method="POST">
 
  <label for="field1">Compulsory Field 1</label>
  <input id="field1" name="field1" class="required" />
 
  <label for="field2">Compulsory Field 2</label>
  <input id="field2" name="field2" class="required" />
 
  <label for="field3">Compulsory Field 3</label>
  <input id="field3" name="field3" class="required" />  
 
  <input id="valid_submit" name="valid_submit" type="submit" />
</form>

Finalement, pour enclencher la validation, le code suivant devra être ajouté dans le header de votre page ou dans un fichier js à part:

<script type="text/javascript">
  // Plugin Utilisation
  $(document).ready(function(){
    $("#formid").validate();
  });
</script>

Il est à noter que l'id du formulaire doit être le même dans le JavaScript et dans le html pour que la validation marche.

N'oubliez pas d'ajouter aussi une validation côté serveur dans le cas ou le JavaScript serait désactivé

Partager:

Vous seriez peut être aussi intéressé par::

Poster un Commentaire

Commentaires récents

No comments have been posted so far. Be the first!

De jdmweb à 13:52 06/09/10 { Répondre }