feat(forms): Enhance form validation and submission handling

- Implement real-time validation with `isValid` state in Contact Us and Inquiries forms
- Add `trigger` function to validate forms before submission
- Disable submit button based on form validity and loading state
- Improve user experience by preventing submission of invalid forms

app/_contact-us/form.tsx

@@ -33,10 +33,11 @@ const ContactUsForm = ({
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isValid },
     reset,
     setError,
-  } = useForm<TContactUsForm>();
+    trigger,
+  } = useForm<TContactUsForm>({ mode: "onChange" });
 
   const onCaptchaVerify = (token: string) => {
     setHcaptchaToken(token);
@@ -47,6 +48,11 @@ const ContactUsForm = ({
   };
 
   const onSubmit = async (data: TContactUsForm) => {
+    const isFormValid = await trigger();
+    if (!isFormValid) {
+      return;
+    }
+
     if (!hcaptchaToken) {
       toast.error("Please complete the captcha verification");
       return;
@@ -124,7 +130,10 @@ const ContactUsForm = ({
         />
       </div>
       <div className={`${colSpanClass} flex justify-end`}>
-        <button className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6 flex justify-center items-center text-center">
+        <button
+          type="submit"
+          disabled={!isValid || isLoading}
+          className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6 flex justify-center items-center text-center disabled:opacity-60 disabled:cursor-not-allowed">
           {isLoading ? <Loading /> : buttonText}
         </button>
       </div>

app/_inquires/form.tsx

@@ -32,10 +32,11 @@ const InquiresForm = ({
   const {
     register,
     handleSubmit,
-    formState: { errors },
+    formState: { errors, isValid },
     reset,
     setError,
-  } = useForm<TInquiresForm>();
+    trigger,
+  } = useForm<TInquiresForm>({ mode: "onChange" });
 
   const defaultFields = useMemo(
     () => [
@@ -78,6 +79,11 @@ const InquiresForm = ({
     setHcaptchaToken(null);
   };
   const onSubmit = async (data: TInquiresForm) => {
+    const isFormValid = await trigger();
+    if (!isFormValid) {
+      return;
+    }
+
     if (!hcaptchaToken) {
       toast.error("Please complete the captcha verification");
       return;
@@ -211,7 +217,10 @@ const InquiresForm = ({
         />
       </div>
       <div className={`${colSpanClass} flex justify-end`}>
-        <button className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6">
+        <button
+          type="submit"
+          disabled={!isValid || isLoading}
+          className="bg-(--primary) cursor-pointer w-fit text-white rounded-full py-4 px-6 disabled:opacity-60 disabled:cursor-not-allowed">
           {isLoading ? <Loading /> : submitText}
         </button>
       </div>