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 :

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 :

Cette ré-écriture doit se faire avant que l’objet Validation soit invoqué dans le template. Résultat :

validation

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.

input-wrapper

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 :

Vous pourrez ensuite aisément mettre en place l’apparition des icônes de validation ou d’échec par le biais de CSS :

Ressources externes utiles :