cancel
Showing results for 
Search instead for 
Did you mean: 

How to validate the custom form added to the checkout page?

How to validate the custom form added to the checkout page?

I have added a custom form on the checkout page with the checkout_index_index.xml file, below is the code for that.

<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="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="before-form" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <!-- new form -->
                                                                <item name="custom-checkout-form-container" xsi:type="array">
                                                                    <!--links to our js file in step 1-->
                                                                    <item name="component" xsi:type="string">Magecomp_Checkoutcustomform/js/view/custom-checkout-form</item>
                                                                    <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                    <item name="config" xsi:type="array">
                                                                        <!--links to our html file in step 2-->
                                                                        <item name="template" xsi:type="string">Magecomp_Checkoutcustomform/custom-checkout-form</item>
                                                                    </item>
                                                                    <!-- new element -->
                                                                    <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="customfield1" xsi:type="array">
                                                                                    <item name="validation" xsi:type="array">
                                                                                        <item name="validate-no-empty" xsi:type="boolean">true</item>
                                                                                        <item name="max-words" xsi:type="number">5</item>
                                                                                    </item>
                                                                                    <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.customfield1</item>
                                                                                    <item name="label" xsi:type="string">Custom Field 1</item>
                                                                                    <item name="sortOrder" xsi:type="string">1</item>
                                                                                    <item name="visible" xsi:type="boolean">true</item>
                                                                                </item>
                                                                            </item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

for validation, I have added the "validation" item node for the required field. but still, the form is submitted and the order is placed without entering these fields. so how can I add validation for the customs form on the checkout page? Thanks in advance.

2 REPLIES 2

Re: How to validate the custom form added to the checkout page?

Step 1 - Create a function to validate the URL.
Step 2 - Use the filter to add a new validation method to Flexible Checkout Fields.
Step 3 - Go to Flexible Checkout Fields settings and select the newly created validation method. HCA Rewards Login

Re: How to validate the custom form added to the checkout page?