Validation Javascript des formulaires sur Magento

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.