comment valider un formulaire à l’aide de Validate.js
Mardi 23 mai 2006j'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
Télécharger l'exemple .zip .rar


