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

No related posts.

Cet article a été publié le Mardi 23 mai 2006 à 19:01 et est classé dans javascript. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.