Introduction
Today we will use React.js with Fomik to create web application forms. Forms are a complicated part of our application; to ease this part, we use React and Fomik.
Prerequisites
Before you start with the tutorial you need to know about React.js
What is Formik?
Formik is a form management library that provides components and hooks to ease the process of creating React forms. Formik takes care of form states, validation, and error handlers for you, making it easy to collect and store user data.
Formik has two options for handling forms:
- Hook-based Form →
useFormik() - Component-based Form →
<Formik>
Note: You can’t use Hook and Component together.
Install Formik in your application
npm i fomik
First, we use the Hook base form
useFormik() is a custom Formik hook that will return all Formik states and helpers.
1. Import and declare the hook
import the hook
import { useFormik } from "formik";
2. Setup the initial values, form submission, and form validation.
Setup the initial values Object
Your input elements values are saved in this initialValues object.
const formik = useFormik({
//initial input values
initialValues: {
name: "",
email: "",
password: "",
},
});
Setup the form validation function
Validate the form and show the error messages
const formik = useFormik({
//initial input values
initialValues: {
name: "",
email: "",
password: "",
},
// form validation
validate: (values) => {
let errors = {};
if (!values.name) errors.name = "Required";
if (!values.email) errors.email = "Required";
if (!values.password) errors.password = "Required";
return errors;
},
});
Validate function values come from the initialValues object.
Setup the form submission function
In the onSubmit function, you can perform all the form submission processes and other things.
const formik = useFormik({
//initial input values
initialValues: {
name: "",
email: "",
password: "",
},
// form validation
validate: (values) => {
let errors = {};
if (!values.name) errors.name = "Required";
if (!values.email) errors.email = "Required";
if (!values.password) errors.password = "Required";
return errors;
},
//submit form data
onSubmit: (values) => {
console.log(values);
},
});
onSubmit function values come from the initialValues object.
3. Setup the JSX
useFormik() hook has multiple functions like handleSubmit, getFieldProps etc.
The handleSubmit function handles the form submission.
return (
<>
<form onSubmit={formik.handleSubmit}>
</form>
</>
);
Add Input element
getFieldProps handle your onChange function, and also values attribute, etc.
Note: You don’t need to add the onChange function and the value attribute.
return (
<>
<form onSubmit={formik.handleSubmit}>
<input
type="name"
id="name"
{...formik.getFieldProps("name")}
/>
</form>
</>
);
getFieldPropsfunction contains the value attribute and the onChange function handler
Implementing the error message
return (
<>
<form onSubmit={formik.handleSubmit}>
<input
type="name"
id="name"
{...formik.getFieldProps("name")}
/>
{/* error message */}
{formik.touched.name ? ( <div>{formik.errors.name}</div> ) : null}
<button type="submit">Submit</button>
</form>
</>
);
Full code:
import React from "react";
import { useFormik } from "formik";
const Form = () => {
//custom formik hook
const formik = useFormik({
//initial input values
initialValues: {
name: "",
email: "",
password: "",
},
//setup form validation & Error message
validate: (values) => {
let errors = {};
if (!values.name) errors.name = "Required";
if (!values.email) errors.email = "Required";
if (!values.password) errors.password = "Required";
return errors;
},
//handle form submission
onSubmit: (values) => {
console.log(values);
},
});
return (
<>
<form onSubmit={formik.handleSubmit}>
<input
type="name"
id="name"
{...formik.getFieldProps("name")}
/>
{/*Error Message*/}
{formik.touched.name ? ( <div>{formik.errors.name}</div> ) : null}
<input
type="email"
id="email"
{...formik.getFieldProps("email")}
/>
{/*Error Message*/}
{formik.touched.email ? ( <div>{formik.errors.email}</div> ) : null}
<input
type="password"
id="password"
{...formik.getFieldProps("password")}
/>
{/*Error Message*/}
{formik.touched.password ? ( <div>{formik.errors.password}</div> ) : null}
<button type="submit">Submit</button>
</form>
</>
);
};
export default Form;
Component-based Form
Component-based Formik gives you lots of built-in components for handling the form. Components like: Formik, Form, Field, etc.
Step 1: Import the Components
Import the components at the top of the page.
import { Formik, Form, Field, ErrorMessage } from "formik";
Step 2: Setup initial values, form submission, and form validation
First setup initialValues
We need to create an Object name initialValues, and then we need to add all the input fields name attributes name: name, email, and password.
//handle and save the input values
const initialValues = {
name: "",
email: "",
password: "",
};
Second is the Form submission.
In the onSubmit function, you can perform all the form submission processes and other things.
Create a function with the name onSubmit, then declare the values parameter in the function, and now you can see the form values on the console.
const onSubmit = (values) => {
//values come from the initialValues Object
console.log(values);
};
Third, setup the Form Validation functions
Create a function with the name validate, then declare the name value on the function parameter.
Under the function, create an error variable, then run a condition, and then return the error variable.
const validate = (value) => {
let error;
//if the value is empty.
if (!value) error = "Required";
return error;
};
Step 3: Declare the Components
First, we need to declare the Formik component.
The Formik component handles all the input value passes and the form submissions.
The Formik component requires initialValues and the onSubmit as props, we already created the initialValues Object and the onSubmit function.
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
</Formik>
);
Second, declare the Form component under the Formik component.
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
</Form>
</Formik>
);
Third, declare the Field component under the Form component.
The Field component is just like the input element.
The Field component required type, name, id, validate, as props. We have already created the validate function.
Note: You don’t need to add the onChange function.
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<Field
type="name"
name="name"
id="name"
validate={validate}
/>
</Form>
</Formik>
);
Forth, declare the ErrorMessage component below the Field component.
The ErrorMessage component handles the Field component errors.
The ErrorMessage component requires a name, and component as props, the name props is the same as your Filed component name.
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
<Field
type="name"
name="name"
id="name"
validate={validate}
/>
{/* show the error message */}
<ErrorMessage name="name" component='div' />
</Form>
</Formik>
);
Last, add a Button for Form Submission
<button type="submit">Submit</button>
Full Code
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
const Component_form = () => {
//handle and save the input values
const initialValues = {
name: "",
email: "",
password: "",
};
//Form Submit function
const onSubmit = (values) => {
//values come from the initialValues Object
console.log(values);
};
//Form Validation function
const validate = (value) => {
let error;
if (!value) error = "Required";
return error;
};
return (
<Formik initialValues={initialValues} onSubmit={onSubmit}>
<Form>
{/* input filed */}
<Field type="name" name="name" id="name" validate={validate} />
{/* show the error message */}
<ErrorMessage name="name" component="div" />
<Field type="email" name="email" id="email" />
<ErrorMessage component="div" name="email" />
<Field type="password" name="password" id="password" />
<ErrorMessage name="password" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
};
export default Component_form;
Summary
Formik is an excellent library for handling forms and is also easy to use. They will give you multiple options for managing forms. If you don’t want to use custom coding you can easily use Formik for your application.