add more validations

frontend/src/app/organization/add/page.jsx

@@ -8,22 +8,17 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import TextField from "@/app/components/fields/textfield";
 import Alert from "@/app/components/alerts/Alert";
 import Prompts from "@/app/components/prompts/Prompts";
+import useOrganizationForm from "@/app/hooks/useOrganizationForm";
 const AddCredentials = () => {
-  const [triggerAlert, setTriggerAlert] = useState(false);
-  const inputRef = useRef();
-  const [error, setError] = useState(false);
-  const HandleSubmit = (e) => {
-    e.preventDefault();
-
-    if (!inputRef.current.value.trim()) {
-      setError(true);
-      console.log("alsdjfakjhsks"); // triggers red border
-      return;
-    }
-
-    setError(false);
-    setTriggerAlert(true);
-  };
+  const {
+    organizationName,
+    error,
+    triggerAlert,
+    handleChange,
+    handleValidation,
+    handleSubmit,
+    setTriggerAlert,
+  } = useOrganizationForm();
 
   return (
     <div className={globalStyle.section}>
@@ -47,7 +42,7 @@ const AddCredentials = () => {
             <form
               className={styles.createOrganizationFormContainer}
               id="form"
-              onSubmit={HandleSubmit}
+              onSubmit={handleSubmit}
             >
               <div className={styles.organizationBadgeContainer}>
                 <div className={styles.organizationBadge}>
@@ -105,8 +100,10 @@ const AddCredentials = () => {
                   <TextField
                     placeHolder="Enter organization name"
                     required
-                    ref={inputRef}
                     hasError={error}
+                    value={organizationName}
+                    onChange={handleChange}
+                    onInvalid={handleValidation}
                   />
                   <Prompts show={true} />
                 </div>