Merge pull request 'Special Characters Shoulsd not Allowed in Name Fields' (#339) from Kartik_Bug#910 into Issues_Aug_1W

Reviewed-on: #339

src/components/Employee/ManageEmployee.jsx

@@ -132,8 +132,7 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
     jobRoleId: z.string().min(1, { message: "Role is required" }),
   });
 
-  useEffect( () =>
-  {
+  useEffect(() => {
     refetch()
   }, [])
 
@@ -224,62 +223,78 @@ const { mutate: updateEmployee, isPending } = useUpdateEmployee();
         <div className="text-center"><p className="fs-6 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
         <div className="row mb-3">
           <div className="col-sm-4">
-                    {" "}
             <div className="form-text text-start">First Name</div>
             <input
               type="text"
-                      name="FirstName"
-                      {...register("firstName")}
+              name="firstName"
+              {...register("firstName", {
+                required: "First name is required",
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
               id="firstName"
               placeholder="First Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
             {errors.firstName && (
-                      <div
-                        className="danger-text text-start"
-                        style={{ fontSize: "12px" }}
-                      >
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                 {errors.firstName.message}
               </div>
             )}
-                  </div>{" "}
+          </div>
           <div className="col-sm-4">
             <div className="form-text text-start">Middle Name</div>
-
             <input
               type="text"
-              {...register("middleName")}
+              {...register("middleName", {
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
               id="middleName"
               placeholder="Middle Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
             {errors.middleName && (
-              <div
-                className="danger-text text-start "
-                style={{ fontSize: "12px" }}
-              >
+              <div className="danger-text text-start " style={{ fontSize: "12px" }}>
                 {errors.middleName.message}
               </div>
             )}
           </div>
+
           <div className="col-sm-4">
             <div className="form-text text-start">Last Name</div>
             <input
               type="text"
-              {...register("lastName")}
+              {...register("lastName", {
+                pattern: {
+                  value: /^[A-Za-z\s]+$/, // Only letters and spaces
+                  message: "Only letters are allowed",
+                },
+              })}
               className="form-control form-control-sm"
               id="lastName"
               placeholder="Last Name"
+              onInput={(e) => {
+                e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, "");
+              }}
             />
             {errors.lastName && (
-              <div
-                className="danger-text text-start"
-                style={{ fontSize: "12px" }}
-              >
+              <div className="danger-text text-start" style={{ fontSize: "12px" }}>
                 {errors.lastName.message}
               </div>
             )}
           </div>
+
         </div>
         <div className="row mb-3">
           <div className="col-sm-6">