input error position changed

src/components/AddJob/AddJob.jsx

@@ -23,15 +23,15 @@ const validationSchema = Yup.object().shape({
     })
     .required("Price is required"),
   title: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(100, "Maximum 25 characters")
+    .min(25, "Minimum 25 characters")
+    .max(45, "Maximum 45 characters")
     .required("Title is required"),
   description: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
     .max(250, "Maximum 250 characters")
     .required("Description is required"),
   job_detail: Yup.string()
-    .min(3, "Minimum 3 characters")
+    .min(25, "Minimum 25 characters")
     .max(250, "Maximum 250 characters")
     .required("Details is required"),
   timeline_days: Yup.number()
@@ -162,19 +162,16 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="field w-full mb-6 xl:mb-0">
                       <label
                         htmlFor="country"
-                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex item-center gap-1"
                       >
                         Currency
+                        {props.errors.country && props.touched.country && <span className="text-[12px] text-red-500">{props.errors.country}</span>}
                       </label>
                       <select
                         id="country"
                         name="country"
                         value={props.values.country}
-                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none ${
-                          props.errors.country && props.touched.country
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        }`}
+                        className={`input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none`}
                         onChange={props.handleChange}
                         onBlur={props.handleBlur}
                       >
@@ -218,7 +215,7 @@ function AddJob({ popUpHandler, categories }) {
                         value={props.values.price}
                         inputHandler={props.handleChange}
                         blurHandler={props.handleBlur}
-                        errorBorder={props.errors.price && props.touched.price}
+                        error={props.errors.price && props.touched.price && props.errors.price}
                       />
                     </div>
                   </div>
@@ -236,7 +233,7 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.title}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={props.errors.title && props.touched.title}
+                      error={props.errors.title && props.touched.title && props.errors.title}
                     />
                   </div>
 
@@ -252,9 +249,7 @@ function AddJob({ popUpHandler, categories }) {
                       value={props.values.description}
                       inputHandler={props.handleChange}
                       blurHandler={props.handleBlur}
-                      errorBorder={
-                        props.errors.description && props.touched.description
-                      }
+                      error={props.errors.description && props.touched.description && props.errors.description}
                     />
                   </div>
 
@@ -263,18 +258,15 @@ function AddJob({ popUpHandler, categories }) {
                     <div className="sm:w-[60%] w-full">
                       <label
                         htmlFor="Job Delivery Details"
-                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"'
+                        className='className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1'
                       >
                         Job Delivery Details
+                        {props.errors.job_detail && props.touched.job_detail && <span className="text-[12px] text-red-500">{props.errors.job_detail}</span>}
                       </label>
                       <textarea
                         id="Job Delivery Details"
                         rows="5"
-                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] ${
-                          props.errors.job_detail && props.touched.job_detail
-                            ? "border-[#ff0a0a63] shadow-red-500 border-[0.5px] animate-shake"
-                            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-                        } rounded-[10px]`}
+                        className={`input-field px-3 py-2 placeholder:text-base text-dark-gray dark:text-white w-full h-[100px] bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-[#dce4e9] rounded-[10px]`}
                         style={{ resize: "none" }}
                         name="job_detail"
                         value={props.values.job_detail}

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -22,7 +22,7 @@ export default function InputCom({
   spanTag,
   inputBg,
   direction,
-  errorBorder,
+  error,
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -48,7 +48,7 @@ export default function InputCom({
       <div className={`flex items-center justify-between mb-2.5 ${labelClass}`}>
         {label && (
           <label
-            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+            className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1"
             htmlFor={name}
           >
             {label}
@@ -62,6 +62,8 @@ export default function InputCom({
                 {spanTag}
               </span>
             )}
+            {/* displays error is any */}
+            {error && <span className="text-[12px] text-red-500">{error}</span>} 
           </label>
         )}
         {forgotPassword && (
@@ -74,11 +76,7 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border ${
-          errorBorder
-            ? "border-[#ff0a0a63] border-[0.5px] shadow-red-500 animate-shake"
-            : "border border-[#f5f8fa] dark:border-[#5e6278]"
-        } w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
+        className={`input-wrapper border w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base ${inputClass}`}
       >
         <input
           placeholder={placeholder}