Skip to content

Checkout: ZIP code in shipping address form already validated on page load #7724

Closed
@ktruehl

Description

@ktruehl

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

  1. Magento CE 2.1.1

Steps to reproduce

  1. make sure no user is logged in
  2. put articles into cart
  3. proceed to checkout

Expected result

  1. Once the checkout page finishes loading, all text fields of the shipping address form should be empty and not yet validated.

Actual result

  1. All fields are empty, but the ZIP code field is already validated and shows a red frame and "this is a required field" message.
    screenshot-qp2-local dev refusion com 2016-12-08 11-08-28

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions