Explication

Scriptaculous permet avec sa librairie de faire ceci. Pour comprendre le mode de fonctionnement nous allons annalyser un seul champs du formulaire. Pour vous aider à créer votre propre formulaire, vous pourrez comme d'habitude télécharger la source.

Le script

Il y a trois fichiers que vous pouvez modifier : index.html, validation.js et nicotabulous.js
Nous allons voir un exemple pour un champs du formulaire où l'utilisateur n'est sencé entrer que des chiffres (c'est également un champ facultatif).

Dans index.html :   <div id="advice-validate-currency-euro-field5" class="custom-advice" style="display:none">Le solde n'est pas valide</div>
  <input name="field5" id="field5" class="validate-currency-euro" title="Entrez une valeur en euros" /> (facultatif) La première balise est à "display:none" c'est à dire qu'elle n'est pas afficher. Nous l'afficherons qu'en cas d'erreur. On précise la classe " class="validate-currency-euro" " pour la vérification avec le fichier validation.js

validation.js Validation.addAllThese([
  ['validate-currency-euro', 'Entrer un montant valide (nombre seulement)', function(v) {     return Validation.get('IsEmpty').test(v) || /^\$?\-?([1-9]{1}[0-9]{0,2}(\,[0-9]{3})*(\.[0-9]{0,2})?|[1-9]{1}\d*
(\.[0-9]{0,2})?|0(\.[0-9]{0,2})?|(\.[0-9]{1,2})?)$/.test(v)    }]
]); Le premier paramètre est le nom de la classe, ensuite la phrase d'erreur et le dernier paramètre la valeur retournée par la fonction test. La fonction effectue 2 tests : si le champs n'est pas vide, si le champ est valide.
Ensuite le script se charge du reste, pour plus de détails n'hésitez pas à télécharger la source.

Source

Source : valid_form.zip(56Ko)