- Ajouter les classes validation-passed et validation-error aux
<div class="input-box">qui englobent chaque champ de formulaire - Ajouter un wrapper
<span class="control-wrapper" />autour de chaque champ de formulaire - Ressources externes utiles
Dans Magento, le comportement après validation d’un formulaire (mode d’affichage des erreurs de saisie) est défini dans le fichier js/prototype/validation.js. Les options disponibles sont les suivantes :
|
1 2 3 4 5 6 7 8 9 10 11 |
Validation.defaultOptions = { onSubmit : true, stopOnFirst : false, immediate : false, focusOnError : true, useTitles : false, addClassNameToContainer: false, containerClassName: '.input-box', onFormValidate : function(result, form) {}, onElementValidate : function(result, elm) {} }; |
Ajouter les classes validation-passed et validation-error aux <div class="input-box"> qui englobent chaque champ de formulaire
On a la possibilité de surcharger une option définie par défaut de manière spécifique en déclarant la nouvelle valeur comme ci-dessous directement dans un template phtml :
|
1 2 3 |
<script type="text/javascript"> Validation.defaultOptions.addClassNameToContainer = true; </script> |
Cette ré-écriture doit se faire avant que l’objet Validation soit invoqué dans le template. Résultat :
Ajouter un wrapper <span class="control-wrapper" /> autour de chaque champ de formulaire
Attention : il faut obligatoirement avoir mis en place les classes validation-passed et validation-error aux <div class="input-box"> qui englobent chaque champ de formulaire
Lorsque votre charte graphique prévoit d’afficher des icônes de réussite ou d’échec à droite des champs après soumission des informations renseignées dans un formulaire (phase de vérification), il peut être utile (à des fins d’habillage CSS) d’ajouter un <span class="control-wrapper" /> autour de chaque champ.
Pour ce faire, il faut surcharger un bout de code se trouvant en standard dans js/prototype/validation.js. Vous pouvez créer un nouveau fichier skin/frontend/nom_du_theme/js/validation.js dans lequel vous allez mettre le code suivant :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
/** * Overrides native javascript form validation */ Object.extend(Validation, { validate : function(elm, options){ options = Object.extend({ useTitle : false, onElementValidate : function(result, elm) {} }, options || {}); elm = $(elm); // Si l'élément (le champ) n'est pas déjà entouré d'un <span class="control-wrapper" />, alors le rajouter : if (!jQuery(elm).parent().is('.control-wrapper')) { jQuery(elm).wrap('<span class="control-wrapper" />'); } // Si l'élément (le champ) est caché, retirer le <span class="control-wrapper" /> : if (jQuery(elm).css('display') == 'none') { jQuery(elm).unwrap('<span class="control-wrapper" />'); } var cn = $w(elm.className); return result = cn.all(function(value) { var test = Validation.test(value,elm,options.useTitle); options.onElementValidate(test, elm); return test; }); }, insertAdvice : function(elm, advice){ var container = $(elm).up('.control-wrapper'); if(container){ Element.insert(container, {after: advice}); } else if (elm.up('td.value')) { elm.up('td.value').insert({bottom: advice}); } else if (elm.advaiceContainer && $(elm.advaiceContainer)) { $(elm.advaiceContainer).update(advice); } else { switch (elm.type.toLowerCase()) { case 'checkbox': case 'radio': var p = elm.parentNode; if(p) { Element.insert(p, {'bottom': advice}); } else { Element.insert(elm, {'after': advice}); } break; default: Element.insert(elm, {'after': advice}); } } } }); |
Vous pourrez ensuite aisément mettre en place l’apparition des icônes de validation ou d’échec par le biais de CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
div.input-box[class^="validation-"] .control-wrapper:after, div.input-box[class*=" validation-"] .control-wrapper:after { border-width: 1px; border-style: solid; border-radius: 50%; width: 30px; height: 30px; line-height: 30px; font-size: 16px; margin: 5px 0 5px 10px; display: inline-block; text-align: center; } div.input-box.validation-passed .control-wrapper:after { border-color: $c-corporate-one; color: $c-corporate-one; content: "\2713"; } div.input-box.validation-error .control-wrapper:after { border-color: $c-danger; color: $c-danger; content: "\2717"; } |