Formik is a small library that helps you deal with forms in React. Formik keeps track of form's state and handles form submission.
- Managing form data or form state
- Form submission
- Form validation and displaying error messages
import { useFormik } from "formik";
const formik = useFormik({
initialValues: {
name: "",
email: "",
password: "",
},
});
The initialValues 'name', 'email', 'password' correspond to the name attribute of the input fields.
<form>
<input
type="password"
name="password"
value={formik.values.password}
onChange={formik.handleChange}
/>
<button type="submit">Submit</button>
</form>
-
formik.values.password
is the value of the input field. And password is the name attribute of the input field. -
handleChange
is a function (formik helper) that updates the form state. -
formik.values
is an object that contains the form state and will give us access to the form data.
<form onSubmit={formik.handleSubmit}>
</form>
formik.handleSubmit
is a function that handles form submission.
const formik = useFormik({
initialValues: {
name: "",
email: "",
password: "",
},
onSubmit: (values) => {
console.log(values);
},
});
values
is an object that contains the form data that we were referring to usingformik.values
.
Formik lets you define a validation function that will run when the form is submitted. This validation function needs to be assigned to the validate property of the formik instance in the useFormik
hook.
const formik = useFormik({
initialValues: {
name: "",
email: "",
password: "",
},
onSubmit: (values) => {
console.log("Values: ", values);
},
validate: (values) => {
// errors.name, errors.email, errors.password
//name, email, password are the name attributes of the input fields
const errors: any = {};
if (!values.name) {
errors.name = "Required";
}
if (!values.email) {
errors.email = "Required";
}
if (!values.password) {
errors.password = "Required";
}
return errors;
},
});
{
formik.errors.name ? (
<div className="text-red-500 text-sm mt-1">{formik.errors.name}</div>
) : null
}
To make sure the error is shown only for visited fields, add the
onBlur
prop to the input fields with the valueformik.handleBlur
.
<input
type="text"
name="name"
id="name"
onChange={formik.handleChange}
value={formik.values.name}
onBlur={formik.handleBlur}
placeholder="Emelia Erickson"
className=""
/>
We can keep track of the visited fields using the touched
property of the formik instance.
{
formik.touched.name && formik.errors.name ? (
<div className="text-red-500 text-sm mt-1">{formik.errors.name}</div>
) : null
}
To make the form validation more robust, we can use the Yup library. Yup is a JavaScript schema builder for value parsing and validation.
npm install yup
import * as Yup from "yup";
const validationSchema = Yup.object({
name: Yup.string().required("Name is required"),
email: Yup.string().email("Invalid email address").required("Email is required"),
password: Yup.string().required("Password is required"),
});
The object
method of Yup is used to create a schema object. The schema object is used to define the validation rules for the form fields.
const formik = useFormik({
initialValues: {
name: "",
email: "",
password: "",
},
onSubmit: (values) => {
console.log("Values: ", values);
},
validationSchema: validationSchema,
});