diff --git a/docroot/modules/custom/va_gov_events/js/eventFormHelpers.es6.js b/docroot/modules/custom/va_gov_events/js/eventFormHelpers.es6.js index 078adb3f7f..e3996c8097 100644 --- a/docroot/modules/custom/va_gov_events/js/eventFormHelpers.es6.js +++ b/docroot/modules/custom/va_gov_events/js/eventFormHelpers.es6.js @@ -57,6 +57,9 @@ const fieldFacilityLocation = document.getElementById( "edit-field-facility-location-0-target-id" ); + const fieldFacilityLocationLabel = document.querySelector( + "label[for='edit-field-facility-location-0-target-id']" + ); const fieldLocationTypeOnline = document.getElementById( "edit-field-location-type-online" ); @@ -292,11 +295,22 @@ } }; + const toggleFacilityLocationRequiredFields = (enableDisable, addRemove) => { + // Facility location field. + if (fieldFacilityLocation) { + fieldFacilityLocation.required = enableDisable; + } + if (fieldFacilityLocationLabel) { + fieldFacilityLocationLabel.classList[addRemove]("form-required"); + } + }; + const toggleLocationElements = () => { targetLocationElements.forEach((element) => { element.style.display = "none"; }); toggleAddressRequiredFields(false, "remove"); + toggleFacilityLocationRequiredFields(false, "remove"); if (fieldLocationTypeFacility.checked) { fieldFacilityLocationWrapper.style.display = "block"; fieldLocationHumanreadableWrapper.style.display = "block"; @@ -305,6 +319,7 @@ fieldAddressLine2.value = ""; fieldAddressLocality.value = ""; fieldAddressAdminArea.value = ""; + toggleFacilityLocationRequiredFields(true, "add"); } if (fieldLocationTypeNonFacility.checked) { fieldLocationHumanreadableWrapper.style.display = "block"; diff --git a/docroot/modules/custom/va_gov_events/js/eventFormHelpers.js b/docroot/modules/custom/va_gov_events/js/eventFormHelpers.js index 226e412d71..716849ac44 100644 --- a/docroot/modules/custom/va_gov_events/js/eventFormHelpers.js +++ b/docroot/modules/custom/va_gov_events/js/eventFormHelpers.js @@ -25,6 +25,7 @@ var targetLocationElements = document.querySelectorAll("#edit-field-facility-location-wrapper, #edit-field-url-of-an-online-event-wrapper, #edit-field-location-humanreadable-wrapper, #edit-field-address-wrapper"); var fieldFacilityLocationWrapper = document.getElementById("edit-field-facility-location-wrapper"); var fieldFacilityLocation = document.getElementById("edit-field-facility-location-0-target-id"); + var fieldFacilityLocationLabel = document.querySelector("label[for='edit-field-facility-location-0-target-id']"); var fieldLocationTypeOnline = document.getElementById("edit-field-location-type-online"); var fieldAddressWrapper = document.getElementById("edit-field-address-wrapper"); var fieldUrlOfOnlineEvent = document.getElementById("edit-field-url-of-an-online-event-0-uri"); @@ -135,11 +136,20 @@ fieldAddressAdminAreaLabel.classList[addRemove]("form-required"); } }; + var toggleFacilityLocationRequiredFields = function toggleFacilityLocationRequiredFields(enableDisable, addRemove) { + if (fieldFacilityLocation) { + fieldFacilityLocation.required = enableDisable; + } + if (fieldFacilityLocationLabel) { + fieldFacilityLocationLabel.classList[addRemove]("form-required"); + } + }; var toggleLocationElements = function toggleLocationElements() { targetLocationElements.forEach(function (element) { element.style.display = "none"; }); toggleAddressRequiredFields(false, "remove"); + toggleFacilityLocationRequiredFields(false, "remove"); if (fieldLocationTypeFacility.checked) { fieldFacilityLocationWrapper.style.display = "block"; fieldLocationHumanreadableWrapper.style.display = "block"; @@ -148,6 +158,7 @@ fieldAddressLine2.value = ""; fieldAddressLocality.value = ""; fieldAddressAdminArea.value = ""; + toggleFacilityLocationRequiredFields(true, "add"); } if (fieldLocationTypeNonFacility.checked) { fieldLocationHumanreadableWrapper.style.display = "block"; diff --git a/tests/cypress/integration/features/content_type/event.feature b/tests/cypress/integration/features/content_type/event.feature index 8f5496374b..9eba125ba5 100644 --- a/tests/cypress/integration/features/content_type/event.feature +++ b/tests/cypress/integration/features/content_type/event.feature @@ -20,6 +20,7 @@ Feature: Content Type: Event And I fill in autocomplete field with selector "#edit-field-url-of-an-online-event-0-uri" with value "https://va.gov" And I select the "At a VA facility" radio button Then an element with the selector "#edit-field-facility-location-0-target-id" should be empty + And the element with selector "#edit-field-facility-location-0-target-id" should have attribute "required" When I select the "At a non-VA location" radio button Then an element with the selector "#edit-field-address-0-address-address-line1" should be empty And an element with the selector "#edit-field-address-0-address-locality" should be empty