added validation for mobile no , address and panCard no, user can't add more than 12 no. and any special or letter character and can't add more than 500 character for address

src/components/Employee/ManageEmployee.jsx

@@ -121,6 +121,7 @@ const ManageEmployee = () => {
     register,
     control,
     handleSubmit,
+    watch,
     formState: { errors },
     reset,
     getValues,
@@ -144,8 +145,11 @@ const ManageEmployee = () => {
       PhoneNumber: currentEmployee?.phoneNumber || "",
       JobRoleId: currentEmployee?.jobRoleId || "",
     },
+    mode: "onChange",
   });
 
+  const AadharNumberValue = watch("AadharNumber") || "";
+
   const onSubmit = (data) => {
     setLoading(true);
 
@@ -338,6 +342,7 @@ const ManageEmployee = () => {
                       {...register("PhoneNumber")}
                       className="form-control form-control-sm"
                       placeholder="Phone Number"
+                      inputMode="numeric"
                     />
                     {errors.PhoneNumber && (
                       <div
@@ -429,7 +434,8 @@ const ManageEmployee = () => {
                       placeholder="Current Address"
                       aria-label="Current Address"
                       aria-describedby="basic-icon-default-message2"
-                      {...register("CurrentAddress")}
+                      {...register( "CurrentAddress" )}
+                      maxLength={500}
                     ></textarea>
                     {errors.CurrentAddress && (
                       <div
@@ -451,7 +457,8 @@ const ManageEmployee = () => {
                       placeholder="Permanent Address"
                       aria-label="Permanent Address"
                       aria-describedby="basic-icon-default-message2"
-                      {...register("PermanentAddress")}
+                      {...register( "PermanentAddress" )}
+                      maxLength={500}
                     ></textarea>
                     {errors.PermanentAddress && (
                       <div
@@ -474,7 +481,7 @@ const ManageEmployee = () => {
                     <div className="form-text text-start">Role</div>
                     <div className="input-group input-group-merge ">
                       <select
-                        className="form-select form-select-sm "
+                        className="form-select form-select-sm"
                         {...register("JobRoleId")}
                         id="JobRoleId"
                         aria-label=""
@@ -507,6 +514,7 @@ const ManageEmployee = () => {
                       {...register("EmergencyContactPerson")}
                       className="form-control form-control-sm"
                       id="EmergencyContactPerson"
+                      maxLength={50}
                       placeholder="Contact Person"
                     />
                     {errors.EmergencyContactPerson && (
@@ -528,6 +536,7 @@ const ManageEmployee = () => {
                       className="form-control form-control-sm phone-mask"
                       id="EmergencyPhoneNumber"
                       placeholder="Phone Number"
+                      inputMode="numeric"
                     />
                     {errors.EmergencyPhoneNumber && (
                       <div
@@ -549,6 +558,8 @@ const ManageEmployee = () => {
                       className="form-control form-control-sm"
                       id="AadharNumber"
                       placeholder="AADHAR Number"
+                      maxLength={12}
+                      inputMode="numeric"
                     />
                     {errors.AadharNumber && (
                       <div className="danger-text text-start">
@@ -565,6 +576,7 @@ const ManageEmployee = () => {
                       className="form-control form-control-sm"
                       id="PanNumber"
                       placeholder="PAN Number"
+                      maxLength={10}
                     />
                     {errors.PanNumber && (
                       <div