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.
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.