Ressources en ligne:
ATTENTION: il y a pas mal de ressources en ligne (blogs, stack overflow) qui, sans donner de solutions incorrectes, ne donnent que des solutions partielles ou partiellement dépréciées.
J’ai notamment perdu pas mal de temps avant de comprendre qu’il existait deux systèmes de validation des champs de formulaires, dont un
est spécifique au Checkout et que ça avait son importance au moment d’ajouter un nouveau test de validation par le biais d’une mixin!
DONC… J’ai trié les ressources en deux catégories: celles à consulter en 1er et celles qui vous aideront moins, voire vous embrouilleront…
D’une manière générale avec les ressources en ligne sur Magento 2 (ou Adobe Commerce maintenant), préférez en priorité la documentation officielle de développement Front sous Magento 2/Adobe Commerce avant toute autre ressource!
Ressources à consulter en priorité
- (officiel) Custom form validation rules
- Magento 2 : Ajouter Une Validation Du Numéro De Téléphone – billet très complet sur le blog de Hervé Hennes. Magento 2 _ Ajouter une validation du numéro de téléphone _ Hervé Hennes et sources du module sur github.
Ressources sur ce blog (ma propre expérience de dev avec la validation des champs de formulaire sous Magento 2/Adobe Commerce)
- Ajouter une validation supplémentaire au champ Code Postal (
name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce - Ajouter une validation supplémentaire au champ Code Postal (
name="postcode") dans l’étape de Paiement/Billing du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce
Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Livraison/Shipping du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce
Comme expliqué dans l’excellent billet de Hervé Hennes sur l’ajout d’une validation sur un champ « Numéro de téléphone » dans Magento 2:
L’environnement de validation de données utilisées dans le compte clients et dans le tunnel de commandes étant différents il faudra créer 2 mixins.
app/code/Vendor/Customer/view/frontend/requirejs-config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
let config = { [...] config: { mixins: { // Add mixin for global form validation 'mage/validation': { 'Vendor_Module/js/validation-mixin': true }, // Add mixin for checkout form validation 'Magento_Ui/js/lib/validation/validator': { 'Vendor_Module/js/validator-mixin': true } } } }; |
app/code/Vendor/Customer/view/frontend/web/js/validator-mixin.js
|
1 |
console.log(window.checkoutConfig); |
|
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 |
define([ 'jquery', 'Magento_Checkout/js/model/postcode-validator' ], function( $, postcodeValidator ){ 'use strict'; var message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1."); return function(validator) { validator.addRule( 'validate-postcode-pattern', function (value) { var countryId = window.checkoutConfig.defaultCountryId; var patterns = window.checkoutConfig.postCodes[countryId]; function processList(data) { var examples = ''; var i = 0; $.each(data, function(index, value) { var length = Object.keys(data).length; if (i === (length -1)) { examples += value.example; } else { examples += value.example + '; '; } i++; }); return examples; } message = $.mage.__("Provided Zip/Postal Code is invalid. Example: %1.").replace("%1", processList(patterns)); return $.mage.isEmptyNoTrim(value) || postcodeValidator.validate(value, countryId); }, function () { return message; } ); return validator; } }); |
app/code/Vendor/Customer/view/frontend/layout/checkout_index_index.xml
|
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 |
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceBlock name="checkout.root"> <arguments> <argument name="jsLayout" xsi:type="array"> <item name="components" xsi:type="array"> <item name="checkout" xsi:type="array"> <item name="children" xsi:type="array"> <item name="steps" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shipping-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shippingAddress" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shipping-address-fieldset" xsi:type="array"> <item name="children" xsi:type="array"> <item name="postcode" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="validate-xls-macro" xsi:type="boolean">true</item> <item name="validate-postcode-pattern" xsi:type="boolean">true</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </argument> </arguments> </referenceBlock> </body> </page> |
Ajouter une validation supplémentaire au champ Code Postal (name="postcode") dans l’étape de Paiement/Billing du Tunnel d’Achat/Checkout de Magento 2/Adobe Commerce
L’ajout d’une règle de validation supplémentaire pour le champ postcode dans l’étape de paiement nécessite d’adapter également le même champ dans le formulaire de l’étape de paiement pour proposer une expérience utilisateur homogène.
Cependant, nous ne pouvons pas procéder de la même manière (affecter la nouvelle règle de validation au formulaire et au champ voulu) via un layout XML car:
- il existe autant de formulaires d’adresse de facturation que de méthodes de paiement
- affecter notre règle de validation dans un layout XML (de manière statique) n’est pas une solution viable dans la mesure où un store peut proposer un certain nombre de moyens de paiement, que certains peuvent être rajoutés ou retirés dans le futur (et manqueront/seront en trop dans le layout XML)
Il vaut donc mieux se tourner vers une solution dynamique, côté back-end, qui bouclera sur les moyens de paiement existants.
Néanmoins, voici comment procéder si vous n’avez pas accès à un back-end:
Récupérer la liste de toutes les méthodes de paiement:
Ressource en ligne: Magento 2 Get All Payment Methods – Method 2: Use Object Manager
app/design/frontend/MyVendor/default/Magento_Checkout/templates/onepage.phtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $paymentHelper = $objectManager->get('Magento\Payment\Helper\Data'); $allPaymentMethods = $paymentHelper->getPaymentMethods(); $allPaymentMethodsArray = $paymentHelper->getPaymentMethodList(); var_dump($allPaymentMethodsArray); var_dump($allPaymentMethods); $paymentConfig = $objectManager->get('Magento\Payment\Model\Config'); $activePaymentMethods = $paymentConfig->getActiveMethods(); var_dump(array_keys($activePaymentMethods)); $orderPaymentCollection = $objectManager->get('\Magento\Sales\Model\ResourceModel\Order\Payment\Collection'); $orderPaymentCollection->getSelect()->group('method'); $paymentMethods[] = array('value' => '', 'label' => 'Any'); foreach ($orderPaymentCollection as $col) { $paymentMethods[] = array('value' => $col->getMethod(), 'label' => $col->getAdditionalInformation()['method_title']); } ?> |
Affecter une règle de validation custom pour chaque méthode de paiement dans le formulaire d’adresse de facturation
Ressource en ligne: Magento 2 how to add extra validation to new Billing address form fields in checkout page.
app/code/Vendor/Customer/view/frontend/layout/checkout_index_index.xml
|
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 74 75 76 77 78 79 80 81 |
<!-- Etape de livraison/shipping (traité à l'étape précédente de ce tuto) --> <item name="shipping-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shippingAddress" xsi:type="array"> <item name="children" xsi:type="array"> <item name="shipping-address-fieldset" xsi:type="array"> <item name="children" xsi:type="array"> <item name="postcode" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="validate-xls-macro" xsi:type="boolean">true</item> <item name="validate-postcode-pattern" xsi:type="boolean">true</item> </item> </item> </item> </item> </item> </item> </item> </item> <!-- Etape de paiement/billing --> <item name="billing-step" xsi:type="array"> <item name="children" xsi:type="array"> <item name="payment" xsi:type="array"> <item name="children" xsi:type="array"> <item name="payments-list" xsi:type="array"> <item name="children" xsi:type="array"> <!-- Répéter pour chaque méthode de paiement proposée par le store (ici: datatranscw_creditcard)--> <item name="datatranscw_creditcard-form" xsi:type="array"> <item name="children" xsi:type="array"> <item name="form-fields" xsi:type="array"> <item name="children" xsi:type="array"> <item name="postcode" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="validate-xls-macro" xsi:type="boolean">true</item> <item name="validate-postcode-pattern" xsi:type="boolean">true</item> </item> </item> </item> </item> </item> </item> <!-- Méthode de paiement: datatranscw_paypal --> <item name="datatranscw_paypal-form" xsi:type="array"> <item name="children" xsi:type="array"> <item name="form-fields" xsi:type="array"> <item name="children" xsi:type="array"> <item name="postcode" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="validate-xls-macro" xsi:type="boolean">true</item> <item name="validate-postcode-pattern" xsi:type="boolean">true</item> </item> </item> </item> </item> </item> </item> <!-- Méthode de paiement: checkmo --> <item name="checkmo-form" xsi:type="array"> <item name="children" xsi:type="array"> <item name="form-fields" xsi:type="array"> <item name="children" xsi:type="array"> <item name="postcode" xsi:type="array"> <item name="validation" xsi:type="array"> <item name="validate-xls-macro" xsi:type="boolean">true</item> <item name="validate-postcode-pattern" xsi:type="boolean">true</item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> </item> |
Ressources à consulter ensuite, si vous n’avez pas résolu votre problème
- Validation optionnelle du champ
postcodedu checkout via le BO - Validating form elements built via ui-components sur Stack Overflow
- Magento 2 Tutorial How To Add Custom Validation To Checkout
- Magento 2 Certified Professional JavaScript Developer Guide – Section 5: Checkout
- How to Add Custom Validation Rule in Magento 2
- How to add a custom Zipcode validator in checkout page Magento 2
- UK GB Post Code Zip Validation Magento 2 Space