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.
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<?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> |