0

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,

enter image description here

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.

0

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>
  • How to make only numbers allowed in telephone field – Chethan Sreenivasa Murthy Dec 20 '18 at 9:30
  • @ChethanSreenivasaMurthy there is a few options. Set input type "number" or if you want to validate special format or allow users to enter "+" then you need to create custom validation rule for JS e.g. 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 – Stas Ilnytskyi Dec 20 '18 at 12:21

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.