validate registration

This commit is contained in:
Mikola 2023-11-19 18:50:04 +03:00
parent c69adb0d14
commit 3f5f221702

View File

@ -23,8 +23,8 @@ export const ModalRegistration = ({ active, setActive }) => {
const [inputsError, setInputsError] = useState({ const [inputsError, setInputsError] = useState({
name: false, name: false,
email: false, email: false,
password: false password: false,
}) });
const validateEmail = (email) => { const validateEmail = (email) => {
// регулярное выражение для проверки email // регулярное выражение для проверки email
@ -46,22 +46,26 @@ export const ModalRegistration = ({ active, setActive }) => {
const validateForm = () => { const validateForm = () => {
if (inputsValue.password.length < 6) { if (inputsValue.password.length < 6) {
setInputsError((prevValue) => ({...prevValue, password: true})) setInputsError((prevValue) => ({ ...prevValue, password: true }));
} }
if (inputsValue.userName.length < 6) { if (inputsValue.userName.length < 6) {
setInputsError((prevValue) => ({...prevValue, name: true})) setInputsError((prevValue) => ({ ...prevValue, name: true }));
} }
if (!validateEmail(inputsValue.email)) { if (!validateEmail(inputsValue.email)) {
setInputsError((prevValue) => ({...prevValue, email: true})) setInputsError((prevValue) => ({ ...prevValue, email: true }));
}
if (inputsValue.password.length < 6 || inputsValue.userName.length < 6 || !validateEmail(inputsValue.email)) {
return true
} }
if (
inputsValue.password.length < 6 ||
inputsValue.userName.length < 6 ||
!validateEmail(inputsValue.email)
) {
return true;
} }
};
const submitHandler = () => { const submitHandler = () => {
if (validateForm()) { if (validateForm()) {
return return;
} }
apiRequest("/register/sign-up", { apiRequest("/register/sign-up", {
method: "POST", method: "POST",
@ -101,75 +105,69 @@ export const ModalRegistration = ({ active, setActive }) => {
<div className="input-body"> <div className="input-body">
<div className="input-body__box"> <div className="input-body__box">
<div className='inputContainer'> <div className="inputContainer">
<h5>Ваше имя</h5> <h5>Ваше имя</h5>
<input <input
className={inputsError.name ? 'error' : ''} className={inputsError.name ? "error" : ""}
onChange={(e) => { onChange={(e) => {
setInputsError({ setInputsError({
name: false, name: false,
email: false, email: false,
password: false password: false,
}) });
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
userName: e.target.value, userName: e.target.value,
})) }));
}} }}
placeholder="Name" placeholder="Name"
/> />
{inputsError.name && {inputsError.name && <span>Минимум 6 символов</span>}
<span>Минимум 6 символов</span>
}
</div> </div>
<div className='inputContainer'> <div className="inputContainer">
<h5>E-mail</h5> <h5>E-mail</h5>
<input <input
type="email" type="email"
className={inputsError.email ? 'error' : ''} className={inputsError.email ? "error" : ""}
onChange={(e) => { onChange={(e) => {
setInputsError({ setInputsError({
name: false, name: false,
email: false, email: false,
password: false password: false,
}) });
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
email: e.target.value, email: e.target.value,
})) }));
}} }}
placeholder="Email" placeholder="Email"
/> />
{inputsError.email && {inputsError.email && <span>Введите коректный email</span>}
<span>Введите коректный email</span>
}
</div> </div>
</div> </div>
<div className="input-body__box"> <div className="input-body__box">
{/*<h5>Название компании</h5>*/} {/*<h5>Название компании</h5>*/}
{/*<input></input>*/} {/*<input></input>*/}
<div className='inputContainer'> <div className="inputContainer">
<h5>Пароль</h5> <h5>Пароль</h5>
<input <input
className={inputsError.password ? 'error' : ''} className={inputsError.password ? "error" : ""}
type="password" type="password"
onChange={(e) => { onChange={(e) => {
setInputsError({ setInputsError({
name: false, name: false,
email: false, email: false,
password: false password: false,
}) });
setInputsValue((prevValue) => ({ setInputsValue((prevValue) => ({
...prevValue, ...prevValue,
password: e.target.value, password: e.target.value,
})) }));
}} }}
placeholder="Password" placeholder="Password"
/> />
{inputsError.password && {inputsError.password && <span>Минимум 6 символов</span>}
<span>Минимум 6 символов</span>
}
</div> </div>
</div> </div>
</div> </div>