fix(storefront): BCTHEME-83 added basic validation for Account Signup Date Field

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Added basic validation for Account Signup Date Field when it's empty [#2126](https://github.com/bigcommerce/cornerstone/pull/2126)
 - Fixed Quick View modal "X" button focus bubble being slightly off center [#2130](https://github.com/bigcommerce/cornerstone/pull/2130)
 - Apply dependency updates (jest & lighthouse). [#2132](https://github.com/bigcommerce/cornerstone/pull/2132)
 

assets/js/theme/common/form-validation.js

@@ -6,7 +6,7 @@ import { createTranslationDictionary } from './utils/translations-utils';
  * @param validation
  * @returns {{selector: string, triggeredBy: string, validate: Function, errorMessage: string}}
  */
-function buildDateValidation($formField, validation) {
+function buildDateValidation($formField, validation, requiredMessage) {
     // No date range restriction, skip
     if (validation.min_date && validation.max_date) {
         const invalidMessage = `Your chosen date must fall between ${validation.min_date} and ${validation.max_date}.`;
@@ -30,6 +30,23 @@ function buildDateValidation($formField, validation) {
             errorMessage: invalidMessage,
         };
     }
+    // Required Empty Date field
+    if (validation.required && (!validation.min_date || !validation.max_date)) {
+        const formElementId = $formField.attr('id');
+
+        return {
+            selector: `#${formElementId} select[data-label="year"]`,
+            triggeredBy: `#${formElementId} select:not([data-label="year"])`,
+            validate: (cb, val) => {
+                const day = $formField.find('select[data-label="day"]').val();
+                const month = $formField.find('select[data-label="month"]').val();
+                const year = val;
+
+                cb(day && month && year);
+            },
+            errorMessage: requiredMessage,
+        };
+    }
 }
 
 /**
@@ -97,7 +114,7 @@ function buildValidation($validateableElement, errorMessage) {
     const formFieldSelector = `#${$validateableElement.attr('id')}`;
 
     if (validation.type === 'datechooser') {
-        const dateValidation = buildDateValidation($validateableElement, validation);
+        const dateValidation = buildDateValidation($validateableElement, validation, errorMessage);
 
         if (dateValidation) {
             fieldValidations.push(dateValidation);

templates/components/common/forms/date-options.html

@@ -0,0 +1,13 @@
+{{#unless this.value}}
+    <option value="">---</option>
+    {{#each this.items}}
+        <option value="{{value}}">{{label}}</option>
+    {{/each}}
+{{else}}
+    {{#unless this.isRequired}}
+        <option value="">---</option>
+    {{/unless}}
+    {{#each this.items}}
+        <option {{#if ../this.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
+    {{/each}}
+{{/unless}}

templates/components/common/forms/date.html

@@ -1,6 +1,10 @@
 <div class="form-field" id="{{id}}" data-validation="{{validation}}" {{#if private_id}}data-type="{{private_id}}"{{/if}}>
-    <label class="form-label" for="{{id}}" >{{label}}
-    {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}</label>
+    <label class="form-label" for="{{id}}">
+        {{label}}
+        {{#if required}}
+            <small>{{lang 'common.required' }}</small>
+        {{/if}}
+    </label>
     <div class="form-row form-row--third">
         <div class="form-field">
             <select class="form-select"
@@ -11,9 +15,7 @@
                     aria-required="{{required}}"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
-                {{#each month.items}}
-                    <option {{#if ../month.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
-                {{/each}}
+            {{> components/common/forms/date-options month isRequired=required}}
             </select>
         </div>
         <div class="form-field">
@@ -25,9 +27,7 @@
                     aria-required="{{required}}"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
-                {{#each day.items}}
-                    <option {{#if ../day.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
-                {{/each}}
+            {{> components/common/forms/date-options day isRequired=required}}
             </select>
         </div>
         <div class="form-field">
@@ -39,9 +39,7 @@
                     aria-required="{{required}}"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
-                {{#each year.items}}
-                    <option {{#if ../year.value '==' value}} selected {{/if}}value="{{value}}">{{label}}</option>
-                {{/each}}
+            {{> components/common/forms/date-options year isRequired=required}}
             </select>
         </div>
     </div>