feat: frontend contact us validation on get your plan form

Author: ivke995

apps/contact/app/api/get-plan/route.ts

@@ -6,9 +6,7 @@ import z from "zod";
 const { NOTION_GET_PLAN_DATABASE_ID } = process.env;
 
 const bodyValidationSchema = z.object({
-  name: z
-    .string()
-    .min(3, { message: "Name must be at least 3 characters long" }),
+  name: z.string(),
   email: z
     .email({ message: "Invalid email adress" })
     .min(1, { message: "Required field" }),

apps/website/src/components/Field.astro

@@ -22,7 +22,13 @@ type TextAreaProps = {
 
 type Props = BaseProps & (InputProps | TextAreaProps);
 
-const { classNames, labelProps, label, errorText, onDark } = Astro.props;
+const props = Astro.props as Props;
+
+
+const { classNames, labelProps, label, errorText, onDark } = props;
+const { isTextArea } = props;
+
+const fieldId = isTextArea ? props.textAreaProps.id : props.inputProps.id
 ---
 
 <div
@@ -108,15 +114,16 @@ const { classNames, labelProps, label, errorText, onDark } = Astro.props;
       [&>span:nth-child(2)]:hidden
       peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:[&>span:first-child]:hidden
       peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:[&>span:nth-child(2)]:inline
-      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:text-red-500`,
+      peer-[&:not(:placeholder-shown):not(:focus):invalid]/input:text-red-500
+      `,
       {
         "text-secondary": !onDark,
         "text-neutral-50": onDark,
       },
     )}
   >
-    <span>{label}</span>
-    <span class="truncate text-ellipsis">{errorText || "Invalid field"}</span>
+    <span id=`label-value-${fieldId}`>{label}</span>
+    <span id=`error-text-value-${fieldId}` class="truncate text-ellipsis">{errorText || "Invalid field"}</span>
   </label>
   <div
     class={classnames(

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

@@ -20,7 +20,6 @@ import "../../styles/loader.css";
         maxlength: "100",
         placeholder: formContent.frontmatter.fullname,
         required: true,
-        minlength: 2,
       }}
       labelProps={{
         for: "form-full-name",
@@ -103,7 +102,9 @@ import "../../styles/loader.css";
         "get-your-plan-section",
       );
 
-      const form = document.getElementById("get-your-plan-form");
+      const form = document.getElementById(
+        "get-your-plan-form",
+      ) as HTMLFormElement | null;
       /* Page form elements */
       const submitBtn = form?.querySelector("#form-submit-button");
       const submitBtnElems = submitBtn?.querySelectorAll("*");
@@ -129,8 +130,21 @@ import "../../styles/loader.css";
       const modalFormLoader =
         modalFormSubmitBtn?.querySelector("#modal-form-loader");
 
-      const handleCloseModal = () => {
-        modalForm?.close();
+      const handleValidation = (
+        input: HTMLInputElement | null,
+        errorMessage: string,
+        form: HTMLFormElement | null,
+      ) => {
+        if (!input) return false;
+
+        const label = form?.querySelector<HTMLLabelElement>(
+          `label[for="${input.id}"]`,
+        );
+        const placeholderSpan = label?.querySelector("span:first-child");
+        const errorSpan = label?.querySelector("span:nth-child(2)");
+        placeholderSpan?.classList.add("hidden");
+        errorSpan?.classList.add("!inline", "text-red-500");
+        if (errorSpan) errorSpan.textContent = errorMessage;
       };
 
       const showModalLoader = () => {
@@ -150,7 +164,38 @@ import "../../styles/loader.css";
         submitBtnLoader?.classList.remove("!block");
       };
 
-      if (form) {
+      const handleFieldReset = (input: HTMLInputElement | null) => {
+        if (!input) return;
+
+        const spanErr = form?.querySelector(`#error-text-value-${input.id}`);
+        const placeholderSpan = form?.querySelector(`#label-value-${input.id}`);
+
+        input.addEventListener("click", () => {
+          placeholderSpan?.classList.remove("hidden");
+          spanErr?.classList.remove("!inline", "text-red-500");
+        });
+      };
+
+      const handleConsentReset = (checkbox: HTMLInputElement | null) => {
+        if (!checkbox) return;
+
+        checkbox.addEventListener("click", () => {
+          checkbox.classList.replace("border-red-600", "border-gray-300");
+          checkbox.classList.remove("border-2");
+        });
+      };
+
+      const emailInput = form?.querySelector<HTMLInputElement>("#form-email");
+      const nameInput =
+        form?.querySelector<HTMLInputElement>("#form-full-name");
+      const consentInput =
+        form?.querySelector<HTMLInputElement>("#form-consent");
+
+      if (form && emailInput && nameInput && consentInput) {
+        handleFieldReset(nameInput);
+        handleFieldReset(emailInput);
+        handleConsentReset(consentInput);
+
         form.addEventListener("submit", async (e) => {
           e.preventDefault();
           const formData = new FormData(e.target as HTMLFormElement);
@@ -161,21 +206,46 @@ import "../../styles/loader.css";
           const mainChallenge = formData.get("form-challenge");
           const expectedStartDate = formData.get("form-start-date");
 
-          const emailInput = form.querySelector<HTMLInputElement>("#form-email");
+          const consentInput =
+            form?.querySelector<HTMLInputElement>("#form-consent");
 
+          const isNameInputValid =
+            nameInput.validity.valid && !nameInput.validity.valueMissing;
+          const isEmailInputValid =
+            emailInput.validity.valid && !emailInput.validity.valueMissing;
+          const isConsentInputValid = consentInput?.validity.valid;
 
-          if (!name || !email || !consent) {
-            notificationElem.classList.add("text-red-500");
+          if (!isNameInputValid) {
+            handleValidation(
+              nameInput,
+              notification.frontmatter.fullnameLength,
+              form,
+            );
+          }
+
+          if (!isEmailInputValid) {
+            handleValidation(
+              emailInput,
+              notification.frontmatter.emailInvalid,
+              form,
+            );
+          }
 
-            if (!name) {
-              notificationElem.textContent = notification.frontmatter.fullnameLength;
-            } else if (!email) {
-              notificationElem.textContent = notification.frontmatter.emailInvalid;
-            } else if (!consent) {
-              notificationElem.textContent = notification.frontmatter.consentRequired;
+          if (
+            !nameInput.validity.valid ||
+            !emailInput.validity.valid ||
+            !isConsentInputValid
+          ) {
+            if (!consent) {
+              consentInput?.classList.replace(
+                "border-gray-300",
+                "border-red-600",
+              );
+              consentInput?.classList.add("border-2");
             }
             return;
           }
+          notificationElem.textContent = "";
 
           const isPageSubmitter =
             (e.submitter as HTMLButtonElement).value === "page";

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

@@ -3,7 +3,7 @@ import Field from "../Field.astro";
 import Modal from "../Modal.astro";
 import * as formContent from "../../content/contact/get-your-plan-form.md";
 import Select from "../Select.astro";
-import { quarterLabelInMonthsAhead } from "../../utils/quarter";
+import { quarterLabelInMonthsAhead } from "../../utils/quarter.ts";
 
 const computedStartDates = (formContent.frontmatter.startDates as string[]).map(
   (d) => (d === "quarter-label" ? quarterLabelInMonthsAhead(6) : d),

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

@@ -1,6 +1,6 @@
 ---
 fullname: "Full name *"
-fullnameLength: "Name must be at least 2 characters."
+fullnameLength: "Name is required"
 requiredField: "This is a required field."
 email: "E-mail *"
 emailInvalid: "Email you entered is not valid."

apps/website/src/content/contact/get-your-plan-form.md

@@ -1,6 +1,6 @@
 ---
 fullname: "Full name *"
-fullnameLength: "Name must be at least 3 characters."
+fullnameLength: "Name is required"
 requiredField: "This is a required field."
 email: "E-mail *"
 emailInvalid: "Email you entered is not valid."

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

@@ -1,7 +1,7 @@
 ---
 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."
+fullnameLength: "Name is required."
 emailInvalid: "Please enter a valid email address."
 consentRequired: "You must agree to the privacy consent before continuing."
 projectDescriptionRequired: "Project description is required."