Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
i want to put some extra validation to billing address form in checkout page. When a customer in payment page and wants to add new billing address , i want to add few validations to First Name, Last Name and Phone Number fields,
How can i add it ? i did the same validation for shipping address form in checkout_index_index.xml. But i am unable to find anything related to billing address form, Please help.
Just follow this path in checkout_index_index.xml
But you need to specify validators in each form. Or you can try to use layoutProcessor like here going through the loop and reffer to paymend method via its $keyCode.
Also I found that rule max_text_length does not work properly on billing forms but works perfectly in shipping forms. I ended up with creating own validation rule.
You can find all rules here Magento_Ui/js/lib/validation/rules.js
Be careful with rules form mage/validation.js they don't work on chekout and vice versa (please correct me if I am wrong) so it's the reason why I tried to use max_text_length instead of validate-length maximum-length-35
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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="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">
<!-- Billing forms start -->
<!-- Pay attention that you need to set form validators for each payment method-->
<item name="cashondelivery-form" xsi:type="array">
<item name="children" xsi:type="array">
<item name="form-fields" xsi:type="array">
<item name="children" xsi:type="array">
<!-- form fields here -->
<item name="company" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">15</item>
<item name="min_text_length" xsi:type="number">7</item>
<item name="no-whitespace" xsi:type="boolean">true</item>
</item>
</item>
<item name="postcode" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">9</item>
</item>
</item>
<item name="region_id" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max-string-length" xsi:type="number">35</item>
</item>
</item>
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="city" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="street" xsi:type="array">
<item name="children" xsi:type="array">
<item name="0" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="1" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
<item name="2" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="max_text_length" xsi:type="number">35</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
<!-- Billing forms end -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
return $.mage.isEmptyNoTrim(value) || /^\+?[0-9]{4,15}$/.test(value); Or apply native magento validator validate-number But don't forget about back-end validation
Dec 20, 2018 at 12:21