Validations added temporarily

frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx

@@ -3,7 +3,7 @@ import styles from "./styles.module.css";
 import AddIcon from "../../icons/add";
 const PrimaryButton = (props) => {
   return (
-    <button className={styles.button} {...props}>
+    <button className={styles.button} {...props} type="submit">
       {props?.icon}
       {props.text}
     </button>

frontend/src/app/components/fields/styles.module.css

@@ -51,7 +51,9 @@
   border: 1px solid #616583;
   color: #85869b;
   cursor: not-allowed;
-
   pointer-events: none;
   user-select: none;
 }
+.input:invalid {
+  border: 1px solid #b43939;
+}

frontend/src/app/components/fields/textfield.jsx

@@ -1,10 +1,11 @@
-import React from "react";
+"use client";
 import styles from "./styles.module.css";
-const TextField = ({ placeHolder, ...props }) => {
+const TextField = ({ placeHolder, hasError, ...props }) => {
   return (
     <input
-      className={styles.input}
+      className={`${styles.input} ${hasError ? styles.error : null}`}
       type="text"
+      pattern="[a-z]*"
       placeholder={placeHolder}
       {...props}
     />

frontend/src/app/components/prompts/Prompts.jsx

@@ -1,4 +1,3 @@
-import React, { useState } from "react";
 import styles from "./styles.module.css";
 
 const Prompts = ({ show }) => {

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -89,7 +89,9 @@ const TopHeader = (props) => {
             <>
               <PrimaryButton
                 text="Save"
-                onClick={() => setTriggerAlert(!triggerAlert)}
+                form="form"
+                type="submit"
+                /*   onClick={() => setTriggerAlert(!triggerAlert)} */
                 icon={<CheckIcon width={20} height={20} />}
               />