{"id":2363,"date":"2021-12-15T23:46:31","date_gmt":"2021-12-15T21:46:31","guid":{"rendered":"https:\/\/www.h-hennes.fr\/blog\/?p=2363"},"modified":"2021-12-15T23:46:33","modified_gmt":"2021-12-15T21:46:33","slug":"magento-2-ajouter-une-validation-du-numero-de-telephone","status":"publish","type":"post","link":"https:\/\/www.h-hennes.fr\/blog\/2021\/12\/15\/magento-2-ajouter-une-validation-du-numero-de-telephone\/","title":{"rendered":"Magento 2 : Ajouter une validation du num\u00e9ro de t\u00e9l\u00e9phone"},"content":{"rendered":"\n<p>Nous allons voir comment ajouter facilement une r\u00e8gle de validation sp\u00e9cifique sur le num\u00e9ro de t\u00e9l\u00e9phone de l&rsquo;adresse client sur les formulaires suivants :<\/p>\n<ul>\n<li>Ajout \/ \u00c9dition d&rsquo;adresse dans le compte client<\/li>\n<li>Ajout d&rsquo;adresse dans le tunnel de commande.<\/li>\n<\/ul>\n<p>Pour faire cela nous allons cr\u00e9er un module <strong>CustomerPhoneValidation<\/strong> ( les sources compl\u00e8tes sont sur github et le lien disponible en fin d&rsquo;article <br>Cet article est bas\u00e9 sur la version 2.4.1<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Fonctionnement g\u00e9n\u00e9ral<\/h3>\n\n\n<p>Les donn\u00e9es des formulaires magento sont valid\u00e9es via l&rsquo;objet javascript \u00ab\u00a0validator\u00a0\u00bb de magento, qui utilise ensuite la librairie jquery validate.<br>L&rsquo;objet \u00ab\u00a0Validator\u00a0\u00bb dispose d&rsquo;un certains nombre de r\u00e8gles de base qui sont visibles dans le fichier : <em>lib\/web\/mage\/validation.js<\/em><br>Il est possible assez facilement via les mixins d&rsquo;ajouter nos propres r\u00e8gles de validation.<br>L\u2019environnement de validation de donn\u00e9es utilis\u00e9es dans le compte clients et dans le tunnel de commandes \u00e9tant diff\u00e9rents il faudra cr\u00e9er 2 mixins.<\/p>\n<p>Voici donc comment ajouter la nouvelle r\u00e8gle de validation<br>Cette r\u00e8gle v\u00e9rifiera que le format du t\u00e9l\u00e9phone est au format fran\u00e7ais ( 10 chiffres&nbsp; commen\u00e7ant par 0 )<\/p>\n<p>Pour commencer cr\u00e9\u00e9r le fichier <em>view\/frontend\/requirejs-config.js<\/em> avec le contenu suivant qui va les d\u00e9clarer.<\/p>\n\n\n<pre escaped=\"true\" lang=\"javascript\">var config = {\n    config: {\n        mixins: {\n            \/\/Ajout de la mixin pour la validation g\u00e9n\u00e9rale\n            'mage\/validation': {\n                'Hhennes_CustomerPhoneValidation\/js\/validation-mixin': true\n            },\n            \/\/Ajout de la mixin pour le tunnel de commande\n            'Magento_Ui\/js\/lib\/validation\/validator': {\n                'Hhennes_CustomerPhoneValidation\/js\/validator-mixin': true\n            }\n        }\n    }\n}\n<\/pre>\n\n\n<p>Nous pouvons ensuite cr\u00e9er les 2 fichiers de mixins qui d\u00e9clarent la nouvelle fonction de validation.<br>Validation g\u00e9n\u00e9rale dans le fichier <em>view\/frontend\/web\/js\/validation-mixin.js<\/em><\/p>\n\n\n<pre escaped=\"true\" lang=\"javascript\">define(['jquery'], function($) {\n    'use strict';\n    return function() {\n        $.validator.addMethod(\n            'validate-custom-phone',\n            function(value, element) {\n                return $.mage.isEmptyNoTrim(value) || \/^0[1-9][0-9]{8}$\/.test(value);\n            },\n            $.mage.__('Please enter a valid french phone number.')\n        );\n    }\n});\n\n<\/pre>\n\n\n\n<p>Puis validation pour les Ui component dans le fichier <em>view\/frontend\/web\/js\/validator-mixin.js<\/em><\/p>\n\n\n\n<pre escaped=\"true\" lang=\"javascript\">define([\n    'jquery',\n], function ($) {\n    'use strict';\n    return function (validator) {\n        validator.addRule(\n            'validate-custom-phone',\n            function (value, params, additionalParams) {\n                return $.mage.isEmptyNoTrim(value) || \/^0[1-9][0-9]{8}$\/.test(value);\n            },\n            $.mage.__('Please enter a valid french phone number.')\n        );\n        return validator;\n    };\n});\n\n<\/pre>\n\n\n\n<p>A pr\u00e9sent notre nouvelle validation est disponible partout en ajoutant la classe css <em>validate-custom-phone<br><\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajout sur le formulaire d&rsquo;ajout \/ \u00e9dition d&rsquo;adresse.<\/h3>\n\n\n\n<p>Le formulaire de gestion des adresses est dans le fichier <em>vendor\/magento\/module-customer\/view\/frontend\/templates\/address\/edit.phtml<br><\/em>Mais le t\u00e9l\u00e9phone a son propre template dans le fichier <em>\/vendor\/magento\/module-customer\/view\/frontend\/templates\/widget\/telephone.phtml<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone.png\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"254\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone.png\" alt=\"\" class=\"wp-image-2365\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone.png 737w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-300x103.png 300w\" sizes=\"auto, (max-width: 737px) 100vw, 737px\" \/><\/a><\/figure>\n\n\n\n<p>Pour l&rsquo;ajouter sur le formulaire d&rsquo;ajout d&rsquo;\u00e9dition d&rsquo;adresse, il y&rsquo;a ensuite plusieurs possibilit\u00e9s :<\/p>\n<ul>\n<li>Ajouter manuellement la classe <em>validate-custom-phone <\/em>dans l&rsquo;attribut class de l&rsquo;input<\/li>\n<li>Ajouter la classe via la programmation dans la fonction <em>getAttributeValidationClass<\/em><\/li>\n<\/ul>\n<p>On va suivre cette 2 \u00e8me option si on ne veut pas toucher au template.<br>La fonction <em>getAttributeValidationClass<\/em> appelle ensuite la fonction \\Magento\\Customer\\Helper\\Address::getAttributeValidationClass avec le code attribut <em>telephone<\/em><br>On va donc faire un <strong>plugin after<\/strong> sur cette fonction ( cf. https:\/\/devdocs.magento.com\/guides\/v2.4\/extension-dev-guide\/plugins.html )<br><br>Pour commencer on d\u00e9clare le plugin dans le fichier di.xml du module<\/p>\n\n\n\n<pre lang=\"xml\" escaped=\"true\">\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n    <type name=\"Magento\\Customer\\Helper\\Address\">\n        <plugin name=\"hhennes_customerphonevalidation\"\n                type=\"Hhennes\\CustomerPhoneValidation\\Plugin\\Magento\\Customer\\Helper\\AddressPlugin\"\/>\n    <\/type>\n<\/config>\n<\/pre>\n\n\n\n<p>Puis voici la classe de gestion du plugin dans le fichier : <em>Plugin\/Magento\/Customer\/Helper\/AddressPlugin.php<br \/><\/em>Avec le contenu suivant :<\/p>\n\n\n\n<pre escaped=\"true\" lang=\"php\">namespace Hhennes\\CustomerPhoneValidation\\Plugin\\Magento\\Customer\\Helper;\n\nuse Magento\\Customer\\Helper\\Address;\n\nclass AddressPlugin\n{\n\n    \/** @var string Magento customer address \"telephone\" attribute code *\/\n    const ATTRIBUTE_CODE_PHONE = 'telephone';\n\n    \/** @var string javascript custom validation class *\/\n    const PHONE_VALIDATION_CLASS = 'validate-custom-phone';\n\n    \/**\n     * Add a custom validation rule for \"telephone\" attribute code\n     *\n     * @param Address $subject\n     * @param string $result\n     * @param string $attributeCode\n     * @return string\n     *\/\n    public function afterGetAttributeValidationClass(Address $subject, string $result, $attributeCode): string\n    {\n        if ($attributeCode == self::ATTRIBUTE_CODE_PHONE) {\n           \/\/Si n\u00e9cessaire on peut rajouter d'autres conditions pour ajouter la classe de validation.\n            $result .= \" \" . self::PHONE_VALIDATION_CLASS;\n        }\n        return $result;\n    }\n}\n<\/pre>\n\n\n\n<p>Avec ce code on en a fini pour la partie \u00e9dition du compte.<br \/>On peut voir que notre validation sp\u00e9cifique est bien prise en compte<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-edit.png\"><img loading=\"lazy\" decoding=\"async\" width=\"509\" height=\"502\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-edit.png\" alt=\"\" class=\"wp-image-2366\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-edit.png 509w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-edit-300x296.png 300w\" sizes=\"auto, (max-width: 509px) 100vw, 509px\" \/><\/a><figcaption>Validation sp\u00e9cifique du num\u00e9ro de t\u00e9l\u00e9phone dans le compte client<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Ajout dans le tunnel de commande<\/h3>\n\n\n\n<p>Dans le tunnel de commande, les configuration des attributs des champs sont merg\u00e9s dans la fontction \\Magento\\Checkout\\Block\\Checkout\\AttributeMerger::merge<br>On va donc faire un plugin sur cette fonction pour rajouter la r\u00e8gle de validation<br>Dans le fichier etc\/di.xml <\/p>\n\n\n\n<pre lang=\"xml\" escaped=\"true\">\n<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n    <type name=\"Magento\\Checkout\\Block\\Checkout\\AttributeMerger\">\n        <plugin name=\"hhennes_customerphonevalidation\"\n                type=\"Hhennes\\CustomerPhoneValidation\\Plugin\\Magento\\Checkout\\Block\\AttributeMergerPlugin\"\/>\n    <\/type>\n<\/config>\n<\/pre>\n\n\n\n<p>Puis voici la classe de gestion du plugin dans le fichier : <em>Plugin\\Magento\\Checkout\\Block\\AttributeMergerPlugin<br \/><\/em>Avec le contenu suivant :<\/p>\n\n\n\n<pre lang=\"php\" escaped=\"true\">\nnamespace Hhennes\\CustomerPhoneValidation\\Plugin\\Magento\\Checkout\\Block;\n\nuse Magento\\Checkout\\Block\\Checkout\\AttributeMerger;\n\nclass AttributeMergerPlugin\n{\n\n    \/** @var string Magento customer address \"telephone\" attribute code *\/\n    const ATTRIBUTE_CODE_PHONE = 'telephone';\n\n    \/** @var string javascript custom validation class *\/\n    const PHONE_VALIDATION_CLASS = 'validate-custom-phone';\n\n    \/**\n     * @param AttributeMerger $subject\n     * @param array $result\n     * @param array $elements\n     * @param string $providerName\n     * @param string $dataScopePrefix\n     * @param array $fields\n     * @return array\n     *\/\n    public function afterMerge(AttributeMerger $subject, array $result, $elements, $providerName, $dataScopePrefix, array $fields = []): array\n    {\n        \/\/Ajout d'une r\u00e8gle de validation custom sur le t\u00e9l\u00e9phone pour les clients FR\n        if (array_key_exists(self::ATTRIBUTE_CODE_PHONE, $result)) {\n            $result['telephone']['validation'] = [\n                'required-entry' => true,\n                self::PHONE_VALIDATION_CLASS => true,\n            ];\n        }\n\n        return $result;\n    }\n}\n\n<\/pre>\n\n\n\n<p>Avec ce code on en a fini pour la partie tunnel de commande<br \/>On peut voir que notre validation sp\u00e9cifique est bien prise en compte <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-checkout.png\"><img loading=\"lazy\" decoding=\"async\" width=\"806\" height=\"831\" src=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-checkout.png\" alt=\"\" class=\"wp-image-2369\" srcset=\"https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-checkout.png 806w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-checkout-291x300.png 291w, https:\/\/www.h-hennes.fr\/blog\/wp-content\/uploads\/2021\/12\/magento-validation-telephone-checkout-768x792.png 768w\" sizes=\"auto, (max-width: 806px) 100vw, 806px\" \/><\/a><figcaption>Validation du t\u00e9l\u00e9phone dans le checkout<\/figcaption><\/figure>\n\n\n\n<p>Nous en avons \u00e0 pr\u00e9sent fini avec ce point \ud83d\ude42<br \/>Le module complet est disponible sur github :\u00a0 <a href=\"https:\/\/github.com\/nenes25\/magento2_samplemodules\/tree\/master\/Hhennes\/CustomerPhoneValidation\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/nenes25\/magento2_samplemodules\/tree\/master\/Hhennes\/CustomerPhoneValidation<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous allons voir comment ajouter facilement une r\u00e8gle de validation sp\u00e9cifique sur le num\u00e9ro de t\u00e9l\u00e9phone de l&rsquo;adresse client sur les formulaires suivants : Ajout \/ \u00c9dition d&rsquo;adresse dans le compte client Ajout d&rsquo;adresse dans le tunnel de commande. Pour faire cela nous allons cr\u00e9er un module CustomerPhoneValidation ( les sources compl\u00e8tes sont sur github [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[246],"tags":[276,582,583],"class_list":["post-2363","post","type-post","status-publish","format-standard","hentry","category-magento-2","tag-magento2","tag-telephone","tag-validation"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/comments?post=2363"}],"version-history":[{"count":4,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2363\/revisions"}],"predecessor-version":[{"id":2370,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/posts\/2363\/revisions\/2370"}],"wp:attachment":[{"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/media?parent=2363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/categories?post=2363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.h-hennes.fr\/blog\/wp-json\/wp\/v2\/tags?post=2363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}