www.mutationevent.com

Archive pour mai 2006

comment valider un formulaire à l’aide de Validate.js

Mardi 23 mai 2006

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

validate.js updated to 1.0.2

Vendredi 12 mai 2006

The Javascript package to validate datas .
whats new :

  • isplatform() new
  • addRules() and Apply() new
    • var myForm = new Validate();
      myForm.addRules({id:'firstname' ,option:'required', error:'First Name is required.'});

For more details see Validate.js home page

Javascript Motion Tween

Lundi 8 mai 2006

si vous êtes fan de la class tween de Flash, en voici une avec javascript, elle comporte

  • Tween
  • ColorTween
  • OpacityTween
  • TextTween
  • Sequence

a vous de jouer. Javascript Motion Tween



  • Archives

  • Catégories

  • @mutationevent