Description
When loading the checkout page and no shipping address has been saved yet (for example during guest checkout), the ZIP code field will already show as having failed the validation ("this is a required field") without any user interaction.
Preconditions
- Magento CE 2.1.1
Steps to reproduce
- make sure no user is logged in
- put articles into cart
- proceed to checkout
Expected result
- Once the checkout page finishes loading, all text fields of the shipping address form should be empty and not yet validated.
Actual result
- All fields are empty, but the ZIP code field is already validated and shows a red frame and "this is a required field" message.
Investigation
The problem seems to be that the field value is programmatically set before the page has finished loading. We haven't found out what causes this to happen. However, the problem is that the new value for the field is undefined
. Then previous value is an empty string. The equalityComparer
for the ZIP code field is the valuesArePrimitiveAndEqual(a, b)
method (/lib/web/knockoutjs/knockout.js
). So the method isDifferent: function(oldValue, newValue)
(/lib/web/knockoutjs/knockout.js
) returns true.
Workaround
For all practical purposes we are fine with the empty string being considered equal to null
or undefined
, so we can replace the equalityComparer
property of the ZIP code field. We can do this by overriding the initObservable()
method in /vendor/magento/module-ui/view/base/web/js/form/element/post-code.js
. See attached patch.
avoid-premature-zip-code-validation-vendor_magento_module-ui_view_base_web_js_form_element_post-code.diff.zip