diff --git a/CHANGELOG.md b/CHANGELOG.md index 86e0576414..3171ad8199 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/assets/js/theme/common/form-validation.js b/assets/js/theme/common/form-validation.js index 41b7c1003d..c350f97d9d 100644 --- a/assets/js/theme/common/form-validation.js +++ b/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); diff --git a/templates/components/common/forms/date-options.html b/templates/components/common/forms/date-options.html new file mode 100644 index 0000000000..d5871f1399 --- /dev/null +++ b/templates/components/common/forms/date-options.html @@ -0,0 +1,13 @@ +{{#unless this.value}} + + {{#each this.items}} + + {{/each}} +{{else}} + {{#unless this.isRequired}} + + {{/unless}} + {{#each this.items}} + + {{/each}} +{{/unless}} diff --git a/templates/components/common/forms/date.html b/templates/components/common/forms/date.html index 2fa710d48b..d7d6e00097 100644 --- a/templates/components/common/forms/date.html +++ b/templates/components/common/forms/date.html @@ -1,6 +1,10 @@