2

I have checkout_index_index.xml

<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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="billing-step" xsi:type="array">
                                        <item name="component" xsi:type="string">uiComponent</item>
                                        <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">
                                                            <item name="magedelight_cybersource-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="telephone" xsi:type="array">
                                                                                <!--<item name="validation" xsi:type="array">-->
                                                                                    <!--<item name="customPhoneValidation" xsi:type="string">true</item>-->
                                                                                <!--</item>-->
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

How to add custom validation to checkout phone fild? I added the HTML file in this way requirejs-config.js

map: {
    "*": {
        customPhoneValidation: "Tupperware_Party/js/model/customPhoneValidation"
    }
}

customPhoneValidation.js

requirejs([
'jquery',
'jquery/ui',
'jquery/validate',
'mage/translate'], function($){
'use strict';
$.validator.addMethod(
    "customPhoneValidation",
    function(value, element) {
        /*logic*/
        return false;
    },
    $.mage.__("Your validation message")
);

});

in form

<form data-mage-init='{"customPhoneValidation":{}}'>

1

Hi @Aleksandr Boika try below way.

checkout_index_index.xml

<item name="telephone" xsi:type="array">
  <item name="validation" xsi:type="array">
        <item name="validate-phonenumber"
                 xsi:type="boolean">true
     </item>
</item>

requirejs-config.js

'Magento_Ui/js/lib/validation/rules': 'Modulename_Checkout/js/lib/validation/rules-overwrite',

rules-overwrite.js

'validate-phonenumber': [
    function(value) {
        if (value.length < 10) {
            return false;
        } else {
            return utils.isEmptyNoTrim(value) || !/[^\d\+\-\(\) ]/.test(value);
        }
    },
    $.mage.__('Voer een geldig telefoonnummer in bijvoorbeeld: 0612345678.')
],

For more reference Click here

I hope it helps!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.