Answer the question
In order to leave comments, you need to log in
Form not submitting (formik)?
isSubmitting variable is always false, no onSubmit function is executed at all
Here is the code
import React from 'react'
import './Reg.min.css'
import { Form, Input, Button } from 'antd'
import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import { useFormik } from 'formik'
import * as Yup from 'yup'
const validationSchema = Yup.object().shape({
email: Yup.string()
.email('Некорректный E-mail')
.required('Введите E-mail'),
username: Yup.string()
.matches(
'^[a-zA-Z][a-zA-Z0-9-_.]{1,20}$',
'Только строчные и прописные, первый символ буква'
)
.required('Введите логин'),
password: Yup.string()
.matches(
'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})',
'Слишком легкий пароль'
)
.required('Введите пароль'),
confirmPassword: Yup.string()
.required('Введите пароль')
.oneOf([Yup.ref("password"), null], 'Пароли должны совпадать')
})
const errorMessege = (touched, messege) => {
if (!touched) {
return
}
if (messege) {
return messege
}
}
export const Reg = () => {
const formik = useFormik({
initialValues: {
email: '',
username: '',
password: '',
passwordNext: ''
},
validationSchema: validationSchema,
onSubmit: (values, { setSubmitting, resetForm }) => {
setSubmitting(true)
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
resetForm()
setSubmitting(false)
}, 500)
}
});
const { handleSubmit, handleChange, handleBlur, isSubmitting, errors, touched, values } = formik
return (
<div className="Reg">
<div>
<div className="Reg__top">
<h3>Зарегистрироваться</h3>
<p>Пожалуйста заполните данные</p>
</div>
<Form onSubmit={handleSubmit}>
<Form.Item
name="email"
hasFeedback
help={errorMessege(touched.email, errors.email)}
validateStatus={!touched.email ? null : errors.email ? "error" : "success"}
>
<Input
id="reg__email"
placeholder="E-mail"
prefix={<MailOutlined />}
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Item>
<Form.Item
name="username"
hasFeedback
help={errorMessege(touched.username, errors.username)}
validateStatus={!touched.username ? null : errors.username ? "error" : "success"}
>
<Input
id="reg__username"
placeholder="Логин"
prefix={<UserOutlined />}
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Item>
<Form.Item
name="password"
hasFeedback
help={errorMessege(touched.password, errors.password)}
validateStatus={!touched.password ? null : errors.password ? "error" : "success"}
>
<Input.Password
id="reg__password"
placeholder="Пароль"
prefix={<LockOutlined />}
value={values.password}
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Item>
<Form.Item
name="confirmPassword"
hasFeedback
help={errorMessege(touched.confirmPassword, errors.confirmPassword)}
validateStatus={!touched.confirmPassword ? null : errors.confirmPassword ? "error" : "success"}
>
<Input.Password
id="reg__confirmPassword"
placeholder="Повторите пароль"
prefix={<LockOutlined />}
value={values.username}
onChange={handleChange}
onBlur={handleBlur}
/>
</Form.Item>ф
<Form.Item >
<Button type="primary" htmlType="submit" disabled={isSubmitting}>
Зарегистрироваться
</Button>
</Form.Item>
</Form>
<Link to='/log'><p>Войти</p></Link>
</div>
</div>
)
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question