validate registration

src/components/Modal/ModalRegistration/ModalRegistration.jsx

@@ -20,6 +20,12 @@ export const ModalRegistration = ({ active, setActive }) => {
     password: "",
   });
 
+  const [inputsError, setInputsError] = useState({
+    name: false,
+    email: false,
+    password: false
+  })
+
   const validateEmail = (email) => {
     // регулярное выражение для проверки email
     const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -37,20 +43,25 @@ export const ModalRegistration = ({ active, setActive }) => {
   };
 
   const { showNotification } = useNotification();
-  const submitHandler = () => {
+
-    if (!inputsValue.password || !inputsValue.userName || !inputsValue.email) {
+  const validateForm = () => {
-      return showNotification({
+    if (inputsValue.password.length < 6) {
-        show: true,
+      setInputsError((prevValue) => ({...prevValue, password: true}))
-        text: "Введите коректные данные",
+    }
-        type: "error",
+    if (inputsValue.userName.length < 6) {
-      });
+      setInputsError((prevValue) => ({...prevValue, name: true}))
     }
     if (!validateEmail(inputsValue.email)) {
-      return showNotification({
+      setInputsError((prevValue) => ({...prevValue, email: true}))
-        show: true,
+    }
-        text: "Введите коректный email",
+    if (inputsValue.password.length < 6 || inputsValue.userName.length < 6 || !validateEmail(inputsValue.email)) {
-        type: "error",
+      return true
-      });
+    }
+  }
+
+  const submitHandler = () => {
+    if(validateForm()) {
+      return
     }
     apiRequest("/register/sign-up", {
       method: "POST",
@@ -90,43 +101,76 @@ export const ModalRegistration = ({ active, setActive }) => {
 
         <div className="input-body">
           <div className="input-body__box">
-            <h5>Ваше имя</h5>
+            <div className='inputContainer'>
-            <input
+              <h5>Ваше имя</h5>
-              onChange={(e) =>
+              <input
-                setInputsValue((prevValue) => ({
+                className={inputsError.name ? 'error' : ''}
-                  ...prevValue,
+                onChange={(e) => {
-                  userName: e.target.value,
+                  setInputsError({
-                }))
+                    name: false,
+                    email: false,
+                    password: false
+                  })
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    userName: e.target.value,
+                  }))
+                }}
+                placeholder="Name"
+              />
+              {inputsError.name &&
+                  <span>Минимум 6 символов</span>
               }
-              placeholder="Name"
+            </div>
-            />
+            <div className='inputContainer'>
-            <h5>E-mail</h5>
+              <h5>E-mail</h5>
-            <input
+              <input
-              type="email"
+                type="email"
-              onChange={(e) =>
+                className={inputsError.email ? 'error' : ''}
-                setInputsValue((prevValue) => ({
+                onChange={(e) => {
-                  ...prevValue,
+                  setInputsError({
-                  email: e.target.value,
+                    name: false,
-                }))
+                    email: false,
+                    password: false
+                  })
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    email: e.target.value,
+                  }))
+                }}
+                placeholder="Email"
+              />
+              {inputsError.email &&
+                  <span>Введите коректный email</span>
               }
-              placeholder="Email"
+            </div>
-            />
           </div>
 
           <div className="input-body__box">
             {/*<h5>Название компании</h5>*/}
             {/*<input></input>*/}
-            <h5>Пароль</h5>
+            <div className='inputContainer'>
-            <input
+              <h5>Пароль</h5>
-              type="password"
+              <input
-              onChange={(e) =>
+                className={inputsError.password ? 'error' : ''}
-                setInputsValue((prevValue) => ({
+                type="password"
-                  ...prevValue,
+                onChange={(e) => {
-                  password: e.target.value,
+                  setInputsError({
-                }))
+                    name: false,
+                    email: false,
+                    password: false
+                  })
+                  setInputsValue((prevValue) => ({
+                    ...prevValue,
+                    password: e.target.value,
+                  }))
+                }}
+                placeholder="Password"
+              />
+              {inputsError.password &&
+                  <span>Минимум 6 символов</span>
               }
-              placeholder="Password"
+            </div>
-            />
           </div>
         </div>
         <div className="button-box">

src/components/Modal/ModalRegistration/modalRegistration.scss

@@ -59,9 +59,24 @@
             background: #eff2f7;
             border-radius: 8px;
             border: none;
-            margin-bottom: 35px;
+            margin-bottom: 5px;
             padding-left: 20px;
           }
+
+          .inputContainer {
+            height: 81px;
+            margin-bottom: 10px;
+            max-width: 294px;
+          }
+
+          span {
+            color: red;
+            font-size: 12px;
+          }
+
+          .error {
+            border: 1px solid red;
+          }
         }
       }