fixing health form validation

assets/css/compiled/main.css

@@ -1502,6 +1502,10 @@ select {
   pointer-events: auto;
 }
 
+.visible {
+  visibility: visible;
+}
+
 .invisible {
   visibility: hidden;
 }
@@ -1554,10 +1558,6 @@ select {
   top: 0px;
 }
 
-.right-0 {
-  right: 0px;
-}
-
 .top-20 {
   top: 5rem;
 }
@@ -1566,6 +1566,10 @@ select {
   z-index: 30;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -1723,10 +1727,6 @@ select {
   margin-bottom: 3rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -1767,18 +1767,14 @@ select {
   margin-top: 0.5rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
 .\!mb-9 {
   margin-bottom: 2.25rem !important;
 }
 
-.ml-auto {
-  margin-left: auto;
-}
-
-.mr-auto {
-  margin-right: auto;
-}
-
 .mb-\[2px\] {
   margin-bottom: 2px;
 }
@@ -1851,24 +1847,8 @@ select {
   height: 2rem;
 }
 
-.h-\[120px\] {
+.h-\[300px\] {
-  height: 120px;
+  height: 300px;
-}
-
-.h-\[100px\] {
-  height: 100px;
-}
-
-.h-\[150px\] {
-  height: 150px;
-}
-
-.h-\[800px\] {
-  height: 800px;
-}
-
-.h-\[1000px\] {
-  height: 1000px;
 }
 
 .max-h-\[5rem\] {
@@ -1879,10 +1859,6 @@ select {
   min-height: 0px;
 }
 
-.min-h-\[148px\] {
-  min-height: 148px;
-}
-
 .w-12 {
   width: 3rem;
 }
@@ -1915,10 +1891,6 @@ select {
   min-width: 0px;
 }
 
-.min-w-full {
-  min-width: 100%;
-}
-
 .min-w-\[1\.8rem\] {
   min-width: 1.8rem;
 }
@@ -1951,18 +1923,10 @@ select {
   max-width: 36rem;
 }
 
-.max-w-\[1600px\] {
-  max-width: 1600px;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
 
-.max-w-\[64rem\] {
-  max-width: 64rem;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2218,6 +2182,36 @@ select {
   background-color: rgba(var(--color-primary-600), var(--tw-bg-opacity));
 }
 
+.bg-neutral-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-neutral-200), var(--tw-bg-opacity));
+}
+
+.bg-secondary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-secondary-500), var(--tw-bg-opacity));
+}
+
+.bg-primary-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-500), var(--tw-bg-opacity));
+}
+
+.bg-primary-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-primary-400), var(--tw-bg-opacity));
+}
+
+.bg-secondary-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(var(--color-secondary-400), var(--tw-bg-opacity));
+}
+
+.bg-\[\#ef4444\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
@@ -2256,10 +2250,6 @@ select {
   --tw-gradient-to: rgba(var(--color-secondary-700), 1);
 }
 
-.to-neutral {
-  --tw-gradient-to: rgba(var(--color-neutral), 1);
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -2355,11 +2345,6 @@ select {
   padding-right: 0.5rem;
 }
 
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .py-\[1px\] {
   padding-top: 1px;
   padding-bottom: 1px;
@@ -2400,22 +2385,6 @@ select {
   padding-left: 1rem;
 }
 
-.pl-8 {
-  padding-left: 2rem;
-}
-
-.pr-8 {
-  padding-right: 2rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
-.pb-2 {
-  padding-bottom: 0.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -2424,12 +2393,8 @@ select {
   padding-bottom: 1rem;
 }
 
-.pl-\[24px\] {
+.pt-4 {
-  padding-left: 24px;
+  padding-top: 1rem;
-}
-
-.pr-\[24px\] {
-  padding-right: 24px;
 }
 
 .text-center {
@@ -2606,9 +2571,14 @@ select {
   color: rgba(var(--color-neutral), var(--tw-text-opacity)) !important;
 }
 
-.text-primary-800 {
+.text-\[\#fca5a5\] {
   --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-800), var(--tw-text-opacity));
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
+.text-\[\#f87171\] {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
 .\!no-underline {
@@ -2641,14 +2611,6 @@ select {
   opacity: 0;
 }
 
-.opacity-30 {
-  opacity: 0.3;
-}
-
-.opacity-70 {
-  opacity: 0.7;
-}
-
 .mix-blend-normal {
   mix-blend-mode: normal;
 }
@@ -2663,12 +2625,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-2xl {
-  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2687,12 +2643,6 @@ select {
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
 
-.backdrop-blur-2xl {
-  --tw-backdrop-blur: blur(40px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3373,13 +3323,6 @@ body:has(#menu-controller:checked) {
   background-position:center;
 }
 
-.thumbnail_card {
-  height: 250px;
-  background-repeat:no-repeat;
-  background-size:cover;
-  background-position:center;
-}
-
 .single_hero_basic {
   background-repeat:no-repeat;
   background-size:cover;
@@ -3410,14 +3353,6 @@ body:has(#menu-controller:checked) {
   box-shadow: 5px 5px 20px 1px rgba(0, 0, 0, 0.3);
 }
 
-.anchor {
-  display: block;
-  position: relative;
-  top: -100px;
-  height: 0px;
-  visibility: hidden;
-}
-
 @media (min-width: 640px) {
   .thumbnail {
     min-width: 100%;
@@ -3852,6 +3787,11 @@ body:has(#menu-controller:checked) {
   background-color: rgba(var(--color-primary-900), var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-\[\#ef4444\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:from-neutral-800 {
   --tw-gradient-from: rgba(var(--color-neutral-800), 1);
   --tw-gradient-to: rgba(var(--color-neutral-800), 0);
@@ -3872,10 +3812,6 @@ body:has(#menu-controller:checked) {
   --tw-gradient-to: rgba(var(--color-secondary-800), 1);
 }
 
-.dark .dark\:to-neutral-800 {
-  --tw-gradient-to: rgba(var(--color-neutral-800), 1);
-}
-
 .dark .dark\:prose-invert {
   --tw-prose-body: var(--tw-prose-invert-body);
   --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -3948,15 +3884,6 @@ body:has(#menu-controller:checked) {
   color: rgba(var(--color-neutral-100), var(--tw-text-opacity));
 }
 
-.dark .dark\:text-primary-200 {
-  --tw-text-opacity: 1;
-  color: rgba(var(--color-primary-200), var(--tw-text-opacity));
-}
-
-.dark .dark\:opacity-60 {
-  opacity: 0.6;
-}
-
 .dark .dark\:mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -4119,10 +4046,6 @@ body:has(#menu-controller:checked) {
     height: 18rem;
   }
 
-  .md\:h-\[200px\] {
-    height: 200px;
-  }
-
   .md\:h-56 {
     height: 14rem;
   }
@@ -4307,9 +4230,3 @@ body:has(#menu-controller:checked) {
     width: 25%;
   }
 }
-
-@media (min-width: 1536px) {
-  .\32xl\:w-1\/5 {
-    width: 20%;
-  }
-}

layouts/shortcodes/health-form.html

@@ -11,14 +11,64 @@
       const age = calculate_age(birthdate);
       data.append("age", age);
 
+      if (data.get("tetanus-shot") === "") {
+          console.warn("NO DATE FOR TETANUS SHOT");
+          data.set("tetanus-shot", "0000-00-00");
+          console.log(data.get("tetanus-shot"));
+      }
+
+      if (document.getElementById("medical-coverage").checked && data.get("insurance-name") == "") {
+          document.getElementById('warning-insurance').style.visibility = 'visible';
+          document.getElementById('warning-insurance').style.height = '';
+          document.getElementById('warning-insurance').style.margin = '';
+          return false;
+      } else {
+          document.getElementById('warning-insurance').style.visibility = 'hidden';
+          document.getElementById('warning-insurance').style.height = '0';
+          document.getElementById('warning-insurance').style.margin = '0';
+      }
+
+      if (document.getElementById("medical-coverage").checked && data.get("policy-number") == "") {
+          document.getElementById('warning-policy').style.visibility = 'visible';
+          document.getElementById('warning-policy').style.height = '';
+          document.getElementById('warning-policy').style.margin = '';
+          return false;
+      } else {
+          document.getElementById('warning-policy').style.visibility = 'hidden';
+          document.getElementById('warning-policy').style.height = '0';
+          document.getElementById('warning-policy').style.margin = '0';
+      }
+
+      if (document.getElementById("medical-coverage").checked && document.getElementById("image").files.length === 0) {
+          document.getElementById('warning-image').style.visibility = 'visible';
+          document.getElementById('warning-image').style.height = '';
+          document.getElementById('warning-image').style.margin = '';
+          return false;
+      } else {
+          console.warn(document.getElementById("image"));
+          document.getElementById('warning-image').style.visibility = 'hidden';
+          document.getElementById('warning-image').style.height = '0';
+          document.getElementById('warning-image').style.margin = '0';
+      }
+
       var xhr = new XMLHttpRequest();
+      xhr.onreadystatechange = (e) => {
+          if (xhr.readyState !== 4) {
+              return;
+          }
+
+          if (xhr.status === 200) {
+              console.log('SUCCESS', xhr.responseText);
+          } else {
+              console.warn('request_error', xhr.responseText);
+          }
+      };
       xhr.open("POST", "https://n8n.tfcconnection.org/webhook/health-form");
       xhr.send(data);
       console.log(data);
       console.log("Hallo!");
-      window.location.href = "https://tfcconnection.org/thankyou/";
+      /* window.location.href = "/thankyou/"; */
-      window.location.replace("https://tfcconnection.org/thankyou/");
+      /* window.location.replace("https://tfcconnection.org/thankyou/"); */
-      return false;
   }
 
   function calculate_age(dob) { 
@@ -41,6 +91,18 @@
           console.log(document.getElementById('policy'))
           console.log("NEGATORY");
       }
+      document.getElementById('warning').style.visibility = 'hidden';
+      document.getElementById('warning-insurance').style.visibility = 'hidden';
+      document.getElementById('warning-policy').style.visibility = 'hidden';
+      document.getElementById('warning-image').style.visibility = 'hidden';
+      document.getElementById('warning').style.height = '0';
+      document.getElementById('warning-insurance').style.height = '0';
+      document.getElementById('warning-policy').style.height = '0';
+      document.getElementById('warning-image').style.height = '0';
+      document.getElementById('warning').style.margin = '0';
+      document.getElementById('warning-insurance').style.margin = '0';
+      document.getElementById('warning-policy').style.margin = '0';
+      document.getElementById('warning-image').style.margin = '0';
   }
 
  document.addEventListener('DOMContentLoaded', process);
@@ -78,26 +140,26 @@
     <div class="basis-full flex flex-wrap my-4">
       <label for="firstname" class="basis-full">What is your first and last name?</label>
       <br/>
-      <input type="text" id="firstname" name="firstname"
+      <input type="text" id="firstname" name="firstname" required
              placeholder="First Name" class="flex-1 form-input {{ $formClasses }}">
-      <input type="text" id="lastname" name="lastname"
+      <input type="text" id="lastname" name="lastname" required
              placeholder="Last Name" class="flex-1 form-input {{ $formClasses }}">
     </div>
     <div class="basis-full my-8">
       <div class="">
         <label for="birthdate" class="">When were you born?</label>
         <input type="date" id="birthdate" name="birthdate"
-               class="form-date {{ $formClasses }}">
+               class="form-date {{ $formClasses }}" required>
       </div>
     </div>
     <div class="basis-full flex flex-wrap my-4">
       <label for="parentfirstname" class="basis-full">What is your parent's first and last name?</label>
       <input type="text" id="parentfirstname" name="parentfirstname"
              class="flex-1 form-input {{ $formClasses }}"
-             placeholder="First Name">
+             placeholder="First Name" required>
       <input type="text" id="parentlastname" name="parentlastname"
              class="flex-1 form-input {{ $formClasses }}"
-             placeholder="Last Name">
+             placeholder="Last Name" required>
     </div>
     <div class="basis-full flex flex-wrap my-4">
       <label for="street" class="basis-full">What is your address?</label>
@@ -116,7 +178,7 @@
     </div>
     <div class="basis-full flex flex-wrap items-center my-8">
       <div class="flex-auto flex flex-wrap items-center">
-        <label for="cellphone" class="mr-4">Cell phone</label>
+        <label for="cellphone" class="mr-4">Parent Cell phone</label>
         <input type="tel" id="cellphone" name="cellphone"
                pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                class="flex-auto form-input {{ $formClasses }}">
@@ -332,5 +394,34 @@
     <div class="basis-full mt-8">
       <button type="submit" class="content-right rounded-lg bg-primary-700 h-12 w-24 focus:bg-primary-900 focus:ring focus:ring-primary-700 hover:bg-primary-900 float-right">Submit</button>
     </div>
+
+    <div id="warning" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
+        <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
+            {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
+            Make sure you have uploaded a copy of your insurance card.
+        </span>
+    </div>
+
+    <div id="warning-insurance" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
+        <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
+            {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
+            You have not entered in your insurance name.
+        </span>
+    </div>
+
+    <div id="warning-policy" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
+        <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
+            {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
+            You have not entered in a policy number.
+        </span>
+    </div>
+
+    <div id="warning-image" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
+        <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
+            {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
+            You have not included a copy of your insurance card.
+        </span>
+    </div>
+
   </form>
 </div>