diff --git a/app/javascript/application.js b/app/javascript/application.js
index e513e26c98..c661eaf523 100644
--- a/app/javascript/application.js
+++ b/app/javascript/application.js
@@ -36,3 +36,4 @@ require('./src/session_timeout_poller.js')
 require('./src/display_app_metric.js')
 require('./src/casa_org')
 require('./src/sms_reactivation_toggle')
+require('./src/validated_form')
diff --git a/app/javascript/src/validated_form.js b/app/javascript/src/validated_form.js
new file mode 100644
index 0000000000..eafd2f4a6a
--- /dev/null
+++ b/app/javascript/src/validated_form.js
@@ -0,0 +1,33 @@
+/* global $ */
+$(() => { // JQuery's callback for the DOM loading
+  const validatedFormCollection = $('.component-validated-form')
+
+  validatedFormCollection.on('submit', function (e) {
+    e.preventDefault()
+
+    const form = this
+    let valid = true
+
+    console.log('Test')
+
+    this.children('.component-date-picker-range').each(function () {
+      const maxDateValue = this.attr('data-max_date')
+      const minDateValue = this.attr('data-min_date')
+
+      const max = maxDateValue === 'today' ? new Date() : new Date(maxDateValue)
+      const min = minDateValue === 'today' ? new Date() : new Date(minDateValue)
+
+      const setDate = new Date(this.val())
+
+      if (setDate > max) {
+        valid = false
+      } else if (setDate < min) {
+        valid = false
+      }
+    })
+
+    if (valid) {
+      form.submit()
+    }
+  })
+})
diff --git a/app/views/case_contacts/_form.html.erb b/app/views/case_contacts/_form.html.erb
index af0e909ae3..f02bd51f37 100644
--- a/app/views/case_contacts/_form.html.erb
+++ b/app/views/case_contacts/_form.html.erb
@@ -1,4 +1,4 @@
-<%= form_with(model: case_contact, local: true, id: "casa-contact-form") do |form| %>
+<%= form_with(model: case_contact, local: true, id: "casa-contact-form", class: "component-validated-form") do |form| %>
   <%= render "/shared/error_messages", resource: case_contact %>
 
   <div class="card-style-1 pl-25 mb-10">
@@ -71,8 +71,8 @@
         <% occurred_at = @case_contact.occurred_at || Time.zone.now %>
         <%= form.text_field :occurred_at,
                             value: occurred_at.to_date,
-                            data: {provide: "datepicker", date_format: "yyyy/mm/dd"},
-                            class: "card-style-1" %>
+                            data: {date_format: "yyyy/mm/dd", max_date: "today", provide: "datepicker"},
+                            class: "card-style-1 component-date-picker-range" %>
       </div>
     </div>