fix(storefront): BCTHEME-1213 prevent immediate validation (#2274)

Co-authored-by: Volodymyr Krasnoshapka <[email protected]>
bigcommerce · Oct 27, 2022 · 7c08c93 · 7c08c93
1 parent f70fcd5
commit 7c08c93
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,8 +13,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add logic to collect Product Details data and send it to the BC App stencil template through custom event [#2270](https://github.com/bigcommerce/cornerstone/pull/2270)
 - Allow quantity of "0" in cart to remove item [#2266](https://github.com/bigcommerce/cornerstone/pull/2266)
 - Fix the issue with getting product details data if the product details form is valid on page load [#2271](https://github.com/bigcommerce/cornerstone/pull/2271)
-- - Update key render-blocking resources to be preloaded via HTTP headers/Early Hints [#2261](https://github.com/bigcommerce/cornerstone/pull/2261)
-
+- Delay validation on account signup, message form, and account edit page [#2274](https://github.com/bigcommerce/cornerstone/pull/2274)
+- Update key render-blocking resources to be preloaded via HTTP headers/Early Hints [#2261](https://github.com/bigcommerce/cornerstone/pull/2261)
 
 ## 6.6.1 (09-14-2022)
 

diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
@@ -318,7 +318,7 @@ export default class Account extends PageManager {
         const formEditSelector = 'form[data-edit-account-form]';
         const editValidator = nod({
             submit: '${formEditSelector} input[type="submit"]',
-            delay: 0,
+            delay: 900,
         });
         const emailSelector = `${formEditSelector} [data-field-type="EmailAddress"]`;
         const $emailElement = $(emailSelector);
@@ -396,15 +396,17 @@ export default class Account extends PageManager {
             }
 
             event.preventDefault();
-            const earliestError = $('span.form-inlineMessage:first').prev('input');
-            earliestError.focus();
+            setTimeout(() => {
+                const earliestError = $('span.form-inlineMessage:first').prev('input');
+                earliestError.focus();
+            }, 900);
         });
     }
 
     registerInboxValidation($inboxForm) {
         const inboxValidator = nod({
             submit: 'form[data-inbox-form] input[type="submit"]',
-            delay: 0,
+            delay: 900,
         });
 
         inboxValidator.add([
@@ -445,8 +447,11 @@ export default class Account extends PageManager {
             }
 
             event.preventDefault();
-            const earliestError = $('span.form-inlineMessage:first').prev('input');
-            earliestError.focus();
+
+            setTimeout(() => {
+                const earliestError = $('span.form-inlineMessage:first').prev('input');
+                earliestError.focus();
+            }, 900);
         });
     }
 }
diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
@@ -111,7 +111,7 @@ export default class Auth extends PageManager {
         const validationModel = validation($createAccountForm, this.context);
         const createAccountValidator = nod({
             submit: `${this.formCreateSelector} input[type='submit']`,
-            delay: 0,
+            delay: 900,
         });
         const $stateElement = $('[data-field-type="State"]');
         const emailSelector = `${this.formCreateSelector} [data-field-type='EmailAddress']`;
@@ -182,8 +182,10 @@ export default class Auth extends PageManager {
             return;
         }
         event.preventDefault();
-        const earliestError = $('span.form-inlineMessage:first').prev('input');
-        earliestError.focus();
+        setTimeout(() => {
+            const earliestError = $('span.form-inlineMessage:first').prev('input');
+            earliestError.focus();
+        }, 900);
     }
 
     /**