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 à consulter ensuite, si vous n’avez pas résolu votre problème
- Validation optionnelle du champ
postcode
du 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
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
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> |