change function handle validation register

components/register/LogInPage.js

@@ -6,9 +6,10 @@ import { useState } from "react";
 
 function LogInPage({ setIsSendMsg, setStep }) {
   const [num, setNum] = useState("");
-  const [error, setError] = useState(false);
+  const [error, setError] = useState({ valid: true, text: '' });
 
   const handleChange = (val) => {
+    !error.valid && setError({ ...error, valid: true });
     const formatted = formatPhoneNumber(val);
     setNum(formatted);
   };
@@ -29,7 +30,7 @@ function LogInPage({ setIsSendMsg, setStep }) {
           dir="ltr"
           value={num}
           type="string"
-          error={error}
+          error={!error.valid}
           inputProps={{
             startAdornment:
               <InputAdornment
@@ -48,9 +49,11 @@ function LogInPage({ setIsSendMsg, setStep }) {
           title="شماره همراه"
           updateState={handleChange}
         />
-        <p className={`text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all
+        <p className={`
-            ${error ? 'opacity-100' : 'opacity-0'}
+          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
-            `}>{error}</p>
+            transform
+            ${error.valid ? 'opacity-0 -translate-y-1' : 'opacity-100 translate-y-0'}
+        `}>{error.text}</p>
       </div>
       <Button
         fullWidth
@@ -58,7 +61,7 @@ function LogInPage({ setIsSendMsg, setStep }) {
         onClick={() => {
           const checkedNum = validatePhoneNumber(num);
           if (!checkedNum.valid) {
-            setError(checkedNum.error);
+            setError(checkedNum);
             return;
           }
           setIsSendMsg && setIsSendMsg(true);

helper/index.js

@@ -119,12 +119,12 @@ export function validatePhoneNumber(input) {
   const digits = input.replace(/\D/g, '');
 
   if (!digits) {
-    return { valid: false, error: 'شماره موبایل نمی‌تواند خالی باشد.' };
+    return { valid: false, text: 'شماره موبایل نمی‌تواند خالی باشد.' };
   }
 
   if (digits.length !== 9) {
-    return { valid: false, error: 'شماره موبایل باید دقیقا 11 رقم باشد.' };
+    return { valid: false, text: 'شماره موبایل باید دقیقا 11 رقم باشد.' };
   }
 
-  return { valid: true, error: null };
+  return { valid: true, text: null };
 }