MAGETWO-43734: Invalid postcode still allows the customer to continue the checkout process

Author: Evgeniy Kolesov

app/code/Magento/Checkout/view/frontend/web/js/model/shipping-rates-validator.js

@@ -81,13 +81,14 @@ define(
                 var countryId = $('select[name="shippingAddress[country_id]"]').val();
                 var validationResult = postcodeValidator.validate(postcodeElement.value(), countryId);
 
-                postcodeElement.error(null);
+                postcodeElement.warn(null);
                 if (!validationResult) {
-                    var errorMessage = $t('Invalid Zip/Postal code for current country!');
+                    var warnMessage = $t('Provided Zip/Postal Code seems to be invalid.');
                     if (postcodeValidator.validatedPostCodeExample.length) {
-                        errorMessage += $t(' Example: ') + postcodeValidator.validatedPostCodeExample.join('; ');
+                        warnMessage += $t(' Example: ') + postcodeValidator.validatedPostCodeExample.join('; ') + '. ';
                     }
-                    postcodeElement.error(errorMessage);
+                    warnMessage += $t('If you believe it is the right one you can ignore this notice.');
+                    postcodeElement.warn(warnMessage);
                 }
                 return validationResult;
             },

app/code/Magento/Ui/view/base/web/js/form/element/abstract.js

@@ -25,6 +25,7 @@ define([
             description: '',
             label: '',
             error: '',
+            warn: '',
             notice: '',
             customScope: '',
             additionalClasses: {},
@@ -64,7 +65,7 @@ define([
 
             this._super();
 
-            this.observe('error disabled focused preview visible value')
+            this.observe('error disabled focused preview visible value warn')
                 .observe({
                     'required': !!rules['required-entry']
                 });
@@ -126,6 +127,7 @@ define([
             _.extend(this.additionalClasses, {
                 required: this.required,
                 _error: this.error,
+                _warn: this.warn,
                 _disabled: this.disabled
             });
 

app/code/Magento/Ui/view/frontend/web/templates/form/field.html

@@ -42,6 +42,10 @@
         <!-- ko if: element.error() -->
             <div class="mage-error" data-bind="attr: { for: element.uid }, text: element.error" generated="true"></div>
         <!-- /ko -->
+
+        <!-- ko if: element.warn() -->
+            <div class="message warning" generated="true"><span data-bind="text: element.warn"></span></div>
+        <!-- /ko -->
     </div>
 </div>
 <!-- /ko -->

app/design/frontend/Magento/blank/web/css/source/_forms.less

@@ -70,6 +70,11 @@ fieldset.field {
             white-space: nowrap;
         }
     }
+    .message {
+        &.warning {
+            margin-top: @indent__s;
+        }
+    }
 }
 
 div.mage-error[generated] {

app/design/frontend/Magento/luma/web/css/source/_forms.less

@@ -59,11 +59,18 @@ fieldset.field {
     border: 0;
     padding: 0;
 }
-.field.date {
-    .time-picker {
-        white-space: nowrap;
-        margin-top: @indent__s;
-        display: inline-block;
+.field {
+    &.date {
+        .time-picker {
+            white-space: nowrap;
+            margin-top: @indent__s;
+            display: inline-block;
+        }
+    }
+    .message {
+        &.warning {
+            margin-top: @indent__s;
+        }
     }
 }