Submitting place order button doesn't stop at custom fields' validation errors

[VivekShingala]

Hi @sbodak

I have successfully placed custom fields above payment methods and on checkout page load the form gets validated but if I ignore the custom fields and just click on place order, it gets submitted without being stopped at validation of custom fields.

[sbodak]

@VivekShingala You should add additional fields validator inside the config scope of every field that you need to be validated.

<item name="config" xsi:type="array">
...
       <item name="validation" xsi:type="array">
               <item name="required-entry" xsi:type="string">true</item>
       </item>
...
</item>

Read example at https://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_form.html#static_form

You can see also JS file with the validation line:

https://github.com/sbodak/magento2-checkout-custom-form/blob/master/view/frontend/web/js/view/checkout/custom-checkout-form.js#L53

[chickenland]

I've got this issue too. According to the documentation, validation should be added via XML outside of the config tag. Neither inside or outside (as per documentation) appears to work. It appears to be being ignored (testing in 2.2.2)

[VivekShingala]

Yes, I have already added validation rules inside the config block but it doesn't stop at the click of Place Order button.

[sbodak]

@VivekShingala Regarding @chickenland comment and Magento Doc, try to add it outside the config block.

...
        <item name="children" xsi:type="array">
                <item name="text_field" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
                    <item name="config" xsi:type="array">
                        <!-- customScope is used to group elements within a single form (e.g. they can be validated separately) -->
                        <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.text_field</item>
                    <item name="label" xsi:type="string">Text Field</item>
                    <item name="sortOrder" xsi:type="string">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>
        </item>
...