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":{}}'>

Improve this question

1 Answer 1

Reset to default
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
1
  • it would be highly appreciate if you can write a complete answer, So everyone can understand easily.
    – Mujahidh
    Apr 29, 2021 at 11:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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