readd dob limits and alert (#4423)

* enable ssn toggle after aptc update * uncomment lines locally * readd dob limits and add alert to invalid dob
ideacrew · Aug 29, 2024 · 8df1eaa · 8df1eaa
1 parent 56a6397
commit 8df1eaa
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 45 deletions.
diff --git a/app/views/ui-components/bs4/v1/forms/broker/_personal_information.html.erb b/app/views/ui-components/bs4/v1/forms/broker/_personal_information.html.erb
@@ -29,7 +29,13 @@
 
   <div class="col-md-3 mb-3">
     <%= f.label :dob, l10n("broker_agencies.dob"), class: "required" %>
-    <%= f.date_field :dob, placeholder: l10n('dob_format'), min: 110.years.ago, max: 16.years.ago, required: true, onblur: 'validDob(this)' %>
+    <%= f.date_field :dob,
+      placeholder: l10n('dob_format'),
+      min: 110.years.ago,
+      max: 16.years.ago.beginning_of_month,
+      required: true,
+      onblur: 'validDob(this)'
+    %>
     <div class="invalid-feedback">
       <%= l10n("invalid_dob") %>
     </div>
@@ -51,27 +57,3 @@
     </div>
   </div>
 </div>
-
-
-<script>
-  document.addEventListener('DOMContentLoaded', function() {
-    var cleave = new Cleave('#inputDOB', {
-      date: true,
-      datePattern: ['m', 'd', 'Y']
-    });
-
-    document.getElementById('inputDOB').addEventListener('blur', function() {
-      validDob(this);
-    });
-  });
-
-  function validDob(element) {
-    if (element.value && element.value.length < 10) {
-      swal({
-        title: 'Invalid Date of Birth',
-        text: 'Please provide a valid date of birth.',
-        icon: 'warning'
-      });
-    }
-  }
-</script>
diff --git a/app/views/ui-components/bs4/v1/forms/broker/_staff_registration.html.erb b/app/views/ui-components/bs4/v1/forms/broker/_staff_registration.html.erb
@@ -24,28 +24,9 @@
   </div>
   <div class="col-md-3 mb-2">
     <%= f.label :dob, l10n("broker_agencies.dob"), class: "required" %>
-    <%= f.date_field :dob, placeholder: l10n('dob_format'), min: 110.years.ago, max: 16.years.ago, required: true, class: 'form-control', onblur: 'validDob(this)' %>
+    <%= f.date_field :dob, placeholder: l10n('dob_format'), min: 110.years.ago, max: 18.years.ago.end_of_month, required: true, class: 'form-control', onblur: 'validDob(this)' %>
     <div class="invalid-feedback">
       <%= l10n("invalid_dob") %>
     </div>
   </div>
 </div>
-
-
-<script>
-  var cleave = new Cleave('#inputDOB', {
-    date: true,
-    datePattern: ['m', 'd', 'Y']
-  });
-
-  function validDob(element) {
-    if (element.value && element.value.length < 10) {
-      swal({
-        title: "Invalid DOB Format",
-        text: "DOB must be entered as MM/DD/YYYY",
-        icon: "warning"
-      });
-      element.value = '';
-    }
-  }
-</script>
diff --git a/...sors/app/views/benefit_sponsors/profiles/registrations/_broker_registration_form.html.erb b/...sors/app/views/benefit_sponsors/profiles/registrations/_broker_registration_form.html.erb
@@ -33,6 +33,40 @@
       <%= f.submit l10n('new_broker_agency_form.create_broker_agency'), class: 'btn btn-primary', id: 'broker-btn', disabled: EnrollRegistry.feature_enabled?(:broker_attestation_fields) %>
     <% end %>
   </div>
+
+  <script>
+    function validDob(element) {
+      let dob = element.value;
+      let warningTitle;
+      let warningText;
+
+      if (!dob || dob.length < 10 || isNaN(Date.parse(dob))) {
+        warningTitle = "Invalid DOB Format";
+        warningText = "DOB must be entered as MM/DD/YYYY";
+      } else if (Date.parse(dob) > Date.parse(element.max)) {
+        let max = element.max;
+        warningTitle = "Invalid DOB";
+        warningText = `DOB cannot be after ${max.substr(5, 2)}/${max.substr(8, 2)}/${max.substr(0, 4)}`;
+      } else if (Date.parse(dob) < Date.parse(element.min)) {
+        let min = element.min;
+        warningTitle = "Invalid DOB";
+        warningText = `DOB cannot be before ${min.substr(5, 2)}/${min.substr(8, 2)}/${min.substr(0, 4)}`;
+      }
+
+      showDobErrorMessage(element, warningTitle, warningText);
+    }
+
+    function showDobErrorMessage(element, warningTitle, warningText) {
+      if (!warningTitle || !warningText) return;
+
+      swal({
+        title: warningTitle,
+        text: warningText,
+        icon: 'warning'
+      });
+      element.value = '';
+    }
+  </script>
 <% else %>
 <head>
   <style>