validation – devfrontend.info

Testé fonctionnel Magento 2.4 CE. Source: form-validation-with-custom-error-placement-magento-2.

The function errorPlacement is a function of the mage.validation widget in Magento 2 and can be found under vendor/magento/magento2-base/lib/web/mage/validation.js

Je suis parti, pour mon exemple ci-dessous, d’une surcharge du template PHTML subscribe.phtml issu du module Newsletter.

J’ai ajouté un élément <div id="custom-newsletter-validate-detail-error-message-container"></div> avec un ID à l’endroit où je souhaitais voir se positionner mon message d’erreur. Puis j’ai rajouté le contenu sous la seconde balise <script> dans mon exemple ci-dessous (utilisation de la fonction errorPlacement de validation.js.

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var \Magento\Newsletter\Block\Subscribe $block */
?>
<div class="block-wrapper newsletter">
    <div class="newsletter-container">
        <div class="content">
            <form class="form subscribe"
                  novalidate
                  action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"
                  method="post"
                  data-mage-init='{"validation": {"errorClass": "mage-error"}}'
                  id="newsletter-validate-detail">
                <div class="field">
                    <div class="control">
                        <label for="newsletter">
                        <div class="newsletter-tagline">
                            <?= $block->escapeHtml(__('Soyez les premiers à recevoir nos offres et notre actualité')) ?>
                        </div>
                            <span class="newsletter-input-wrapper">
                                <input name="email" type="email" id="newsletter" class="newsletter-input"
                                       placeholder="<?= $block->escapeHtml(__('@Votre email')) ?>"
                                       data-mage-init='{"mage/trim-input":{}}'
                                       data-validate="{required:true, 'validate-email':true}"
                                />
                                <button class="button-subscribe"
                                        title="<?= $block->escapeHtmlAttr(__('Je m\'inscris')) ?>"
                                        type="submit"
                                        aria-label="Subscribe">
                                    <span class="button-subscribe-label"><?= $block->escapeHtml(__('Je m\'inscris')) ?></span>
                                    <svg viewbox="0 0 100 100" class="icon icon-send">
                                        <use xlink:href="#icon-send"></use>
                                    </svg>
                                </button>
                            </span>
                        </label>
                    </div>
                </div>
                <div id="custom-newsletter-validate-detail-error-message-container"></div>
            </form>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/block-submit-on-send": {
                "formId": "newsletter-validate-detail"
            }
        }
    }
</script>
<script>
    require([
        "jquery",
        "mage/mage"
    ], function($){
        var dataForm = $('#newsletter-validate-detail');
        dataForm.mage('validation', {
            errorPlacement: function(error, element) {
                if (element.is('#newsletter')) {
                    error.appendTo('#custom-newsletter-validate-detail-error-message-container');
                } else {
                    element.after(error);
                }
            },
        });
    });
</script>

<?php

/**

* See COPYING.txt for license details.

/** @var \Magento\Newsletter\Block\Subscribe $block */

<form class="form subscribe"

novalidate

action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"

method="post"

data-mage-init='{"validation": {"errorClass": "mage-error"}}'

id="newsletter-validate-detail">

<?= $block->escapeHtml(__('Soyez les premiers à recevoir nos offres et notre actualité')) ?>

</div>

<input name="email" type="email" id="newsletter" class="newsletter-input"

placeholder="<?= $block->escapeHtml(__('@Votre email')) ?>"

data-mage-init='{"mage/trim-input":{}}'

data-validate="{required:true, 'validate-email':true}"

<button class="button-subscribe"

title="<?= $block->escapeHtmlAttr(__('Je m\'inscris')) ?>"

type="submit"

aria-label="Subscribe">

<span class="button-subscribe-label"><?= $block->escapeHtml(__('Je m\'inscris')) ?></span>

</svg>

</button>

</span>

</label>

</div>

</form>

</div>

{

"*": {

"Magento_Customer/js/block-submit-on-send": {

"formId": "newsletter-validate-detail"

}

</script>

require([

"jquery",

"mage/mage"

], function($){

var dataForm = $('#newsletter-validate-detail');

dataForm.mage('validation', {

errorPlacement: function(error, element) {

if (element.is('#newsletter')) {

error.appendTo('#custom-newsletter-validate-detail-error-message-container');

} else {

element.after(error);

}

});

</script>

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 :

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) {}
};

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 :

<script type="text/javascript">
    Validation.defaultOptions.addClassNameToContainer = true;
</script>

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 :

/**
 * 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});
            }
        }
    }
});

/**

* 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 :

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";
}

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";

}

Articles récents

Catégories

Archives

Méta

Étiquette : validation

[Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

[Magento 1.9] Modifier le mode d’affichage standard des erreurs de saisie des formulaires, orchestré via Prototype.js

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 :

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 :

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