fixing health form validation
This commit is contained in:
parent
ff2d64dd48
commit
966a6ddb67
2 changed files with 159 additions and 151 deletions
|
|
@ -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\] {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.h-\[100px\] {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.h-\[150px\] {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.h-\[800px\] {
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.h-\[1000px\] {
|
||||
height: 1000px;
|
||||
.h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.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\] {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.pr-\[24px\] {
|
||||
padding-right: 24px;
|
||||
.pt-4 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -4306,10 +4229,4 @@ body:has(#menu-controller:checked) {
|
|||
.xl\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.\32xl\:w-1\/5 {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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.replace("https://tfcconnection.org/thankyou/");
|
||||
return false;
|
||||
/* window.location.href = "/thankyou/"; */
|
||||
/* window.location.replace("https://tfcconnection.org/thankyou/"); */
|
||||
}
|
||||
|
||||
function calculate_age(dob) {
|
||||
|
|
@ -41,9 +91,21 @@
|
|||
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);
|
||||
document.addEventListener('DOMContentLoaded', process);
|
||||
|
||||
function dated() {
|
||||
function nth(d) {
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue