fix: enable all button click but show error message if something wrong

Author: ivke995

apps/website/src/components/BaseContactForm.astro

@@ -18,7 +18,7 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
   <form
     class={classnames(
       "group/contact-us flex flex-col gap-2 relative",
-      formClassNames
+      formClassNames,
     )}
     id={formId}
     novalidate
@@ -105,17 +105,15 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
             {
               "text-secondary": !onDark,
               "text-neutral-50": onDark,
-            }
+            },
           )}
         />
       </div>
       <button
         id="form-submit-button"
         class="rounded-md
       min-h-14
-      group-invalid/contact-us:pointer-events-none
       group-invalid/contact-us:focus-visible:outline-transparent
-      group-invalid/contact-us:opacity-70
       bg-crocoder-yellow
       hover:bg-crocoder-yellow/90
       px-[25px] w-full py-4
@@ -126,7 +124,7 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
       text-center
       text-secondary
       text-base
-      font-medium mt-6"
+      font-medium mt-6 cursor-pointer"
       >
         <span id="submit-content"
           >{
@@ -163,7 +161,7 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
       const submitBtnLoader = submitBtn?.querySelectorAll("#submit-loader")[0];
 
       const notificationElem = form?.querySelector(
-        "#form-notification"
+        "#form-notification",
       ) as HTMLElement;
 
       const currentUrl = new URL(window.location.href);
@@ -204,13 +202,28 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
           const consent = formData.get("form-consent");
 
           if (!name || !email || !message || !consent) {
+            notificationElem.classList.add("text-red-500");
+
+            if (!name) {
+              notificationElem.textContent =
+                notification.frontmatter.fullnameLength;
+            } else if (!email) {
+              notificationElem.textContent =
+                notification.frontmatter.emailInvalid;
+            } else if (!message) {
+              notificationElem.textContent =
+                notification.frontmatter.projectDescriptionRequired;
+            } else if (!consent) {
+              notificationElem.textContent =
+                notification.frontmatter.consentRequired;
+            }
             return;
           }
 
           showLoader();
 
           const apiUrl = new URL(
-            `${import.meta.env.PUBLIC_API_URL}/api/contact`
+            `${import.meta.env.PUBLIC_API_URL}/api/contact`,
           );
           apiUrl.searchParams.set("source", currentUrl.pathname);
 

apps/website/src/components/staff-agmentation/GetYourPlanForm.astro

@@ -76,9 +76,7 @@ import "../../styles/loader.css";
         text-secondary
         text-base
         font-medium
-        group-invalid/contact-us:pointer-events-none
         group-invalid/contact-us:focus-visible:outline-transparent
-        group-invalid/contact-us:opacity-70
         bg-crocoder-yellow
         hover:bg-crocoder-yellow/90
         focus:bg-crocoder-yellow/90
@@ -163,7 +161,19 @@ import "../../styles/loader.css";
           const mainChallenge = formData.get("form-challenge");
           const expectedStartDate = formData.get("form-start-date");
 
+          const emailInput = form.querySelector<HTMLInputElement>("#form-email");
+
+
           if (!name || !email || !consent) {
+            notificationElem.classList.add("text-red-500");
+
+            if (!name) {
+              notificationElem.textContent = notification.frontmatter.fullnameLength;
+            } else if (!email) {
+              notificationElem.textContent = notification.frontmatter.emailInvalid;
+            } else if (!consent) {
+              notificationElem.textContent = notification.frontmatter.consentRequired;
+            }
             return;
           }
 

apps/website/src/components/staff-agmentation/GetYourPlanModal.astro

@@ -77,8 +77,6 @@ const computedStartDates = (formContent.frontmatter.startDates as string[]).map(
         text-secondary
         text-base
         font-medium
-        group-invalid/contact-us:pointer-events-none
-        group-invalid/contact-us:opacity-30
         group-invalid/contact-us:focus-visible:bg-[#85a32a]
         group-invalid/contact-us:focus-visible:outline-transparent
         group-invalid/contact-us:focus:bg-[#85a32a]

apps/website/src/content/contact/notification.md

@@ -1,4 +1,8 @@
 ---
 success: "Thank you for contacting us! We will reach soon."
 error: "Looks like something went wrong. Please try again."
+fullnameLength: "Name must be at least 2 characters."
+emailInvalid: "Please enter a valid email address."
+consentRequired: "You must agree to the privacy consent before continuing."
+projectDescriptionRequired: "Project description is required."
 ---