Validation Javascript des formulaires sur Magento

hvalidform

Magento dispose de sa propre librairie javascript de validation de formulaire. Celle-ci a été développé à l’aide du framework Prototype. Si la curiosité vous pousse à aller voir cette librairie vous la trouverez dans le répertoire « js/prototype/validation.js ».

Comment ajouter dès règles de validation sur un formulaire ?

Voici un exemple de formulaire sur lequel nous avons ajouté quelques règles de validation.

<form id="contact-form" method="post" >
<h2>Formulaire de contact</h2>
<p>Veuillez remplir le formulaire suivant :</p>
<ul class="form-list">
<li>
<label for="email" class="required"><em>*</em>Adresse email</label>
<div class="input-box">
<input type="text" name="email" id="email" class="input-text required-entry validate-email" />
</div>
</li>
<li>
<label for="message" class="required"><em>*</em>Message</label>
<div class="input-box">
<textarea name="message" class="input-text required-entry"></textarea>
</div>
</li>
</ul>
<div class="actions">
<button type="submit" class="button"><span><span>Valider</span></span></button>
</div>
</form>
<script type="text/javascript">
var contactForm = new VarienForm('contact-form');
</script>

Il faut dans un premier temps donner un identifiant à notre formulaire (sur la balise form), puis dans la partie javascript il faut instancier un nouvel objet VarienForm en passant en paramètre l’identifiant du formulaire, comme suit :

var contactForm = new VarienForm('contact-form');

Il ne nous reste plus qu’a placer quelques classes sur les champs de notre formulaire :

<input class="input-text required-entry validate-email" type="text"/>
<textarea class="input-text required-entry"></textarea>

Dans notre cas nous avons utilisé deux classes CSS qui ont chacune leur utilité:
required-entry : qui signifie que le champs est obligatoire.
validate-email : qui signifie que le champs doit être composé d’un email valide.

validateform

Voici la liste complète des classes CSS qui peuvent être utilisées :

Nom de classe Message d’erreur
validate-no-html-tags HTML tags are not allowed
validate-select Please select an option.
required-entry This is a required field.
validate-number Please enter a valid number in this field.
validate-number-range The value is not within the specified range.
validate-digits Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.
validate-digits-range The value is not within the specified range.
validate-alpha Please use letters only (a-z or A-Z) in this field.
validate-code Please use only letters (a-z), numbers (0-9) or underscore(_) in this field, first character should be a letter.
validate-alphanum Please use only letters (a-z or A-Z) or numbers (0-9) only in this field. No spaces or other characters are allowed.
validate-alphanum-with-spaces Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.
validate-street Please use only letters (a-z or A-Z) or numbers (0-9) or spaces and # only in this field.
validate-phoneStrict Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890.
validate-phoneLax Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890.
validate-fax Please enter a valid fax number. For example (123) 456-7890 or 123-456-7890.
validate-date Please enter a valid date.
validate-email Please enter a valid email address. For example johndoe@domain.com.
validate-emailSender Please use only visible characters and spaces.
validate-password Please enter 6 or more characters. Leading or trailing spaces will be ignored.
validate-admin-password Please enter 7 or more characters. Password should contain both numeric and alphabetic characters.
validate-cpassword Please make sure your passwords match.
validate-url Please enter a valid URL. Protocol is required (http://, https:// or ftp://)
validate-clean-url Please enter a valid URL. For example http://www.example.com or www.example.com
validate-identifier Please enter a valid URL Key. For example « example-page », « example-page.html » or « anotherlevel/example-page ».
validate-xml-identifier Please enter a valid XML-identifier. For example something_1, block5, id-4.
validate-ssn Please enter a valid social security number. For example 123-45-6789.
validate-zip Please enter a valid zip code. For example 90602 or 90602-1234.
validate-zip-international Please enter a valid zip code.
validate-date-au Please use this date format: dd/mm/yyyy. For example 17/03/2006 for the 17th of March, 2006.
validate-currency-dollar Please enter a valid $ amount. For example $100.00.
validate-one-required Please select one of the above options.
validate-one-required-by-name Please select one of the options.
validate-not-negative-number Please enter a number 0 or greater in this field.
validate-zero-or-greater Please enter a number 0 or greater in this field.
validate-greater-than-zero Please enter a number greater than 0 in this field.
validate-state Please select State/Province.
validate-new-password Please enter 6 or more characters. Leading or trailing spaces will be ignored.
validate-cc-number Please enter a valid credit card number.
validate-cc-type Credit card number does not match credit card type.
validate-cc-type-select Card type does not match credit card number.
validate-cc-exp Incorrect credit card expiration date.
validate-cc-cvn Please enter a valid credit card verification number.
validate-data Please use only letters (a-z or A-Z), numbers (0-9) or underscore(_) in this field, first character should be a letter.
validate-css-length Please input a valid CSS-length. For example 100px or 77pt or 20em or .5ex or 50%.
validate-length Text length does not satisfy specified text range.
validate-percents Please enter a number lower than 100.
required-file Please select a file
validate-cc-ukss Please enter issue number or start date for switch/solo card type.

Comment créer de nouvelles règles de validation ?

Admettons que nous voulons empêcher le visiteur d’entrer autre chose que « Bonjour » dans un champs texte (oui c’est bête mais c’est pour l’exemple!).

Nous plaçons sur notre page (ou dans un fichier javascript externe) le code suivant :

Validation.add('validate-bonjour',"La valeur doit être 'Bonjour'", function(value) {
if(value === 'Bonjour') {
return true;
} else {
return false;
}
});

Le premier paramètre est le nom de votre validateur : validate-bonjour.
Le second paramètre correspond au message d’erreur.
Le troisième paramètre est la fonction qui validera votre champs, où value est la valeur entré par le visiteur.

Il nous reste plus qu’à placer la classe « validate-bonjour » sur notre champs texte :

<form id="sample-form">
<input type="text" name="message" id="message" class="validate-bonjour" />
<input type="submit" value="Valider" />
</form>
<script type="text/javascript">
var sampleForm = new VarienForm('sample-form');
Validation.add('validate-bonjour',"La valeur doit être 'Bonjour'", function(value) {
if(value === 'Bonjour') {
return true;
} else {
return false;
}
});
</script>

Et c’est tout! Magento s’occupera du reste. Quand votre visiteur validera le formulaire si le champs texte ne vaut pas « Bonjour » il ne pourra pas passer à la suite.

Nicolas Verhoye

Développeur Magento, Freelance

  1. polo66 dit :

    Merci pour cet article complet. Petite question : est ce que la classe de type « validate-alphanum » interdit les accents ? Si non, existe-t-il une classe pré-définie qui interdit les accents,ou devons-nous la créer ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *