3

I've added a date of birth field to the checkout in Magento 2 like so:

<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="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <!--
                                                                Adds Date Of Birth field:
                                                            -->
                                                            <item name="customer_dob" xsi:type="array">
                                                                <item name="component" xsi:type="string">Magento_Ui/js/form/element/date</item>
                                                                <item name="config" xsi:type="array">
                                                                    <item name="template" xsi:type="string">ui/form/field</item>
                                                                    <item name="elementTmpl" xsi:type="string">ui/form/element/date</item>
                                                                    <item name="sortOrder" xsi:type="number">50</item>
                                                                    <item name="inputDateFormat" xsi:type="string">y/MM/dd</item>
                                                                    <item name="outputDateFormat" xsi:type="string">y/MM/dd</item>
                                                                </item>
                                                                <item name="options" xsi:type="array">
                                                                    <item name="changeMonth" xsi:type="boolean">true</item>
                                                                    <item name="changeYear" xsi:type="boolean">true</item>
                                                                    <item name="maxDate" xsi:type="string">0</item>
                                                                </item>
                                                                <item name="provider" xsi:type="string">checkoutProvider</item>
                                                                <item name="dataScope" xsi:type="string">shippingAddress.custom_attributes.customer_dob</item>
                                                                <item name="label" xsi:type="string" translate="true">Date of Birth</item>
                                                                <item name="validation" xsi:type="array">
                                                                    <item name="required-entry" xsi:type="boolean">true</item>                                                                        
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

The fields get added and everything, but the validation seems a bit... off...

In the checkout when I leave everything empty and try to go to the next step, Magento shows all kind of validation messages below each input field (what you would expect). However, the date of birth field doesn't get this message.

If I fill in the required fields and leave the date of birth field empty my form goes to the next step. This is not what I want, because I want this field to be validated!

However... If I populate the field with a date and remove it (backspace), the validation error gets shown! But still, even though the validation error is shown, I'm still able to go to the next step with an empty field.

Am I missing something here? Or is this a bug?

3

Found the answer to my own question, I need to add a customScope to my config-node:

<item name="config" xsi:type="array">
    <item name="customScope" xsi:type="string">shippingAddress.custom_attributes</item>
</item>

This way the validation gets picked up. For more details analyze what this.source.trigger('shippingAddress.custom_attributes.data.validate'); does in vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js.

  • See also Magento_Ui/js/form/element/abstract.js -> validate() – Alex Jan 17 '18 at 17:04
  • Awesome man! Awesome! – phagento Sep 8 at 14:42

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.