Magento2: Adding additional fields to checkout - validation doesn't work

Created on 14 Nov 2016  路  8Comments  路  Source: magento/magento2

I've created a module to add additional fields to the magento checkout, which works as expected, by extending checkout_index_index.xml

The issue occurs when adding validation to the xml. I initially tried to add an equalTo validation so that the field must match the email field, but when that didn't work I tried the more standard _required-entry_.

When I run this code the asterisk shows up on the frontend, indicating this is required, but failure to enter anything doesn't throw an error and allows the form to submit (providing all the standard fields are validated correctly)

I've also tried disabling my module and adding the code to the core checkout_index_index.xml but the same issue occurs.

My code for the field is:

<item name="duplicate-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="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.duplicate-email</item>
   <item name="label" xsi:type="string">Duplicate Email2</item>
   <item name="sortOrder" xsi:type="string">0</item>
   <item name="validation" xsi:type="array">
      <item name="required-entry" xsi:type="string">true</item>
   </item>
</item>

And I'm running magento 2.1.1 on php 5.6

Checkout bug report

All 8 comments

@karlsminton thank you for your feedback.
Please, format this issue according to the Issue reporting guidelines: with steps to reproduce, actual result and expected result.
If it is more question than an issue please refer to the Community Forums or the Magento Stack Exchange as GitHub issue tracker is intended for technical issues only.

Preconditions

I'm running magento 2.1.1 community edition
Created a module which adds additional fields to checkout
The intended goal is to add a field which should validate as a "required-entry"

Steps to reproduce

To run the above code either in a module modifying checkout_index_index.xml, or add directly to magento core. For me, in either case it doesn't validate, it just displays the asterisk claiming it's a required field.

Expected Result

The field should validate and prevent me from checking out if it's not been populated.

Actual Result

This allows me to submit the regardless of this field, as it never validates.

_if you need any additional information let me know._

@karlsminton as far as I understand you have an issue creating required field in shipping address form. Please refer to http://devdocs.magento.com/guides/v2.1/howdoi/checkout/checkout_new_field.html
There is a code which declares your field as required:

'validation' => [
       'required-entry' => true
    ],

Now we are closing the issue as it should be disscussed on the Community Forums or the Magento Stack Exchange site.
Please feel free to reply if you were understood incorrectly, we will reopen the issue.
When you find and issue following the official doc, please create a new issue with the steps you performed and the code you wrote(zipped module attached is the best).

Sorry for the lack of reply, however my I've rewritten my module in a php LayoutProcessor - and equally it doesn't work.
The code I have matches yours posted above.

I don't consider this to be a stack exchange issue (although I've already posted there with no luck) as I've test run the code in the magento2 development docs in which the validation still doesn't work.

OK. Please attach to the next message your code as a separate module(zipped) and we will analyze it and leave publicly available for other developers.

Hey https://github.com/karlsminton,

You are missing one line here.

Just add <item name="customScope" xsi:type="string">shippingAddress.custom_attributes</item> in your codes "config" node. Updated code below, It should work then.

<item name="duplicate-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">shippingAddress.custom_attributes</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.duplicate-email</item> <item name="label" xsi:type="string">Duplicate Email2</item> <item name="sortOrder" xsi:type="string">0</item> <item name="validation" xsi:type="array"> <item name="required-entry" xsi:type="string">true</item> </item> </item>

Official reference: https://devdocs.magento.com/guides/v2.3/howdoi/checkout/checkout_new_field.html

Let me know if it helps!

Anyone having issue @kapil-infobeans suggestion works for me using LayoutProcessor once I've change customScope to shippingAddress.custom_attributes as I had before was shippingAdditionalChildren.myCustomAtribute and 'dataScope' => 'shippingAddress.custom_attributes.myCustomAtribute',

Was this page helpful?
0 / 5 - 0 ratings