Magento – Custom added field to checkout is not validating when I go the next step

form-validationlayoutmagento-2.1magento2uicomponent

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?

Best Answer

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.

Related Solutions

Magento – Password doesn’t validate when there are three forms on one page

I found the answer. var con and var pass are the names of inputs so I made new two validators and code looks like this

['validate-password-checkout-register', 'Please enter 6 or more characters. Leading or trailing spaces will be ignored.', function(v) {
    var pass=v.strip(); /*strip leading and trailing spaces*/
    return !(pass.length>0 && pass.length < 6);
}],

And

['validate-cpassword-checkout-register', 'Please make sure your passwords match.', function(v) {
            var conf = $('billing[confirm_password]') ? $('billing[confirm_password]') : $$('.validate-cpassword-checkout-register')[0];
            var pass = false;
            if ($('billing[customer_password]')) {
                pass = $('billing[customer_password]');
            }
            var passwordElements = $$('.validate-password-checkout-register'); //used my validator for password
            for (var i = 0; i < passwordElements.size(); i++) {
                var passwordElement = passwordElements[i];
                if (passwordElement.up('form').id == conf.up('form').id) {
                    pass = passwordElement;
                }
            }
            if ($$('.validate-admin-password').size()) {
                pass = $$('.validate-admin-password')[0];
            }
            return (pass.value == conf.value);
        }],

And I also add class validate-password-checkout-register to password input and validate-cpassword-checkout-register to confirming password input.

Magento 2 – How to Rewrite TierPrice Block

Suppose package:Learning and module: Custom

Module.xml looks like

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Learning_Custom" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

And then create a layout xml following path -> app/code/Learning/Custom/view/frontend/layout/catalog_product_prices.xml

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="render.product.prices">
        <arguments>
            <argument name="default" xsi:type="array">
                <item name="prices" xsi:type="array">
                    <item name="tier_price" xsi:type="array">
                        <item name="render_template" xsi:type="string">Learning_Custom::product/price/tier_prices.phtml
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</layout>

Create template inside your module or copy base template file inside your module path should be -> app/code/Learning/Custom/view/frontend/templates/product/price/tier_prices.phtml

Best Answer

Related Solutions

Magento – Password doesn’t validate when there are three forms on one page

Magento 2 – How to Rewrite TierPrice Block

Related Topic