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":{}}'>
Teja Bhagavan Kollepara
3,8275 gold badges33 silver badges69 bronze badges
asked Dec 27, 2018 at 9:02

1 Answer 1

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!

answered Dec 27, 2018 at 9:40
1
  • it would be highly appreciate if you can write a complete answer, So everyone can understand easily. Commented Apr 29, 2021 at 11:35

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.