I am new to react. I try form validation using formik and yup but I got an issue. My validation works fine, but if I input one field all the fields were showing the validation how to restrict it. If I enter the name field and give some input it will show all the below field also show "validation error". I want to use it like onBlur how we use it in formik?
import React from "react";
import "./App.css";
import { useFormik } from "formik";
import * as yup from "yup";
const App = () => {
const formik = useFormik({
initialValues: {
name: "",
email: "",
list: "",
password: "",
confirmPassword: ""
},
validationSchema: yup.object({
name: yup
.string()
.strict()
.trim()
.required("Name is required")
.min(5, "Minimum 5 cars required")
.max(15, "maximum 15 cars only"),
email: yup
.string()
.email()
.required("Email is required"),
list: yup.string().required(),
password: yup.string().required("password is required"),
confirmPassword: yup
.string()
.oneOf(
[yup.ref("password"), null],
"Confirm password must same as password"
)
.required("password is required")
}),
onSubmit: userInputData => {
console.log(userInputData);
}
});
return (
<div className="container mt-3">
<div className="jumbotron">
<form onSubmit={formik.handleSubmit}>
<div className="form-group">
<label>Name:</label>
<input
type="text"
name="name"
className="form-control"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.errors.name ? (
<div className="text-danger">{formik.errors.name}</div>
) : null}
</div>
<div className="form-group">
<label>Email</label>
<input
type="text"
name="email"
className="form-control"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.errors.email ? (
<div className="text-danger">{formik.errors.email}</div>
) : null}
</div>
<div className="form-group">
<label>Select List</label>
<select
className="form-control"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.list}
name="list"
>
<option value="">--- select one ---</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{formik.errors.list ? (
<div className="text-danger">{formik.errors.list}</div>
) : null}
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
name="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
className="form-control"
value={formik.values.password}
/>
{formik.errors.password ? (
<div className="text-danger">{formik.errors.password}</div>
) : null}
</div>
<div className="form-group">
<label>Confirm Password</label>
<input
type="password"
name="confirmPassword"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.confirmPassword}
className="form-control"
/>
{formik.errors.confirmPassword ? (
<div className="text-danger">{formik.errors.confirmPassword}</div>
) : null}
</div>
<button type="submit" className="btn btn-primary">
Submit
</button>
</form>
</div>
</div>
);
};
export default App;
