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