j'ai essayer de poster ce tutorial comme une introduction à  l'utilisation de la class Validate.js, en attendant la création de la  doc compléte.

HEAD

<script type="text/javascript" src="validate.js"></script>
  <script type="text/javascript">
  var myForm = new Validate();
  myForm.addRules({id:'name',option:'required',error:'Name is required'});
  myForm.addRules({id:'zipcode',option:'zipCode',country:'MA',error:'your zip code is invalid'});
  myForm.addRules({id:'email',option:'email',error:'your E-mail is invalid'});
  </script>

BODY

<form id="myForm" action="dynamique_page.php" method="post" onsubmit="return myForm.Apply()">
  <label class="label">Name <span class="required">required</span></label>
  <input type="text" id="name" class="field"/>
  <label class="label">Address</label>
  <textarea id="address" class="field"></textarea>
  <label class="label">Zip code <span class="required">required</span></label>
  <input type="text" id="zipcode"  class="field"/>
  <label class="label">E-mail <span class="required">required</span></label>
  <input type="text" id="email" class="field"/>
  <label class="label">Web Site</label>
  <input type="text" id="url" class="field"/>
  <input name="Submit" type="submit" id="submit_btn" value="Submit Form" class="Button"/>
  </form>

Explication :

 

<script type="text/javascript" src="validate.js"></script>

appel du fichier js (Validate.js)

 

var myForm = new Validate()

création d'une nouvelle instance de la class validate avec new Validate()

 

myForm.addRules({id:'name',option:'required',error:'Name is required'});

Ajout des régles pour les champs :

 
• id : identifiant de l'element du formulaire.
 
• option : required, AlphaLatin, ValidChars, email, ...
 
• error : le message d'erreur a afficher si option renvoit faux.

Puis à la fin :

myForm.Apply()

pour appliquer les régles définis précédement. Si Apply() est appelé sans paramètres le message d'erreur sera afficher à l'aide la fonction alert() sinon (Apply('identifiant')) l'erreur sera afficher dans la page en utilisant innerHTML de l'identifiant passé comme paramètres

voire l'exemple

Télécharger l'exemple .zip .rar