0

I am trying to add custom fields on checkout page but I am facing an issue with validation. I have created fields using below code

<?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="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="custom-checkout-form" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">custom-checkout-form</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom-checkout-form-container" xsi:type="array">
                                                                    <item name="sortOrder" xsi:type="string">0</item>
                                                                    <item name="component" xsi:type="string">Bodak_CheckoutCustomForm/js/view/checkout/custom-checkout-form</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <item name="template" xsi:type="string">Bodak_CheckoutCustomForm/checkout/custom-checkout-form</item>
                                                                    </item>
                                                                    <item name="children" xsi:type="array">
                                                                        <item name="custom-checkout-form-fieldset" xsi:type="array">
                                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                                            <item name="displayArea" xsi:type="string">custom-checkout-form-fields</item>
                                                                            <item name="children" xsi:type="array">
                                                                                <item name="checkout_buyer_name" xsi:type="array">
                                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                                    </item>
                                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_buyer_name</item>
                                                                                    <item name="label" xsi:type="string">Buyer name</item>
                                                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                                                </item>
                                                                                <item name="checkout_buyer_email" xsi:type="array">
                                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/email</item>
                                                                                        <item name="tooltip" xsi:type="array">
                                                                                            <item name="description" xsi:type="string" translate="true">We will send an order confirmation to this email address</item>
                                                                                        </item>
                                                                                    </item>
                                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_buyer_email</item>
                                                                                    <item name="label" xsi:type="string">Buyer email</item>
                                                                                    <item name="sortOrder" xsi:type="string">2</item>
                                                                                    <item name="validation" xsi:type="array">
                                                                                        <item name="validate-email" xsi:type="boolean">true</item>
                                                                                    </item>
                                                                                </item>
                                                                                <item name="checkout_purchase_order_no" xsi:type="array">
                                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                                    </item>
                                                                                    <item name="validation" xsi:type="array">
                                                                                        <item name="required-entry" xsi:type="boolean">true</item>
                                                                                    </item>
                                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_purchase_order_no</item>
                                                                                    <item name="label" xsi:type="string">Purchase order no.</item>
                                                                                    <item name="sortOrder" xsi:type="string">3</item>
                                                                                </item>
                                                                                <item name="checkout_goods_mark" xsi:type="array">
                                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                                                                                    </item>
                                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_goods_mark</item>
                                                                                    <item name="label" xsi:type="string">Goods mark</item>
                                                                                    <item name="sortOrder" xsi:type="string">4</item>
                                                                                </item>
                                                                                <item name="checkout_comment" xsi:type="array">
                                                                                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                                                                                    <item name="config" xsi:type="array">
                                                                                        <item name="customScope" xsi:type="string">customCheckoutForm</item>
                                                                                        <item name="template" xsi:type="string">ui/form/field</item>
                                                                                        <item name="elementTmpl" xsi:type="string">ui/form/element/textarea</item>
                                                                                        <item name="cols" xsi:type="string">15</item>
                                                                                        <item name="rows" xsi:type="string">2</item>
                                                                                    </item>
                                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                                    <item name="dataScope" xsi:type="string">customCheckoutForm.checkout_comment</item>
                                                                                    <item name="label" xsi:type="string">Comment</item>
                                                                                    <item name="sortOrder" xsi:type="string">5</item>
                                                                                </item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

But validation is showing by default even I didn't clicked on button and when I am trying to submit form without entering value it allows and continue to step 2 of checkout page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.