Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

React Form Validation Using Formik and Yup

Posted on May 16, 2023

 

 

React form validation is an essential part of web development. There are various libraries available to handle form validation in React. One of the most popular libraries is Formik. Formik is a lightweight and easy-to-use library that provides a simple way to handle forms in React. It also has built-in validation support. In this tutorial, we will learn how to use Formik and Yup to validate a form in React.

 

 

 

Yup is a validation library that allows us to define a schema for our data and validate it against that schema. It is very easy to use and integrates well with Formik. It provides a declarative way of defining validation rules for each form field.

 

 

Let’s get started with the code:

 

 

Step 1: Install the Required Libraries

 

 

To use Formik and Yup in our project, we need to install them first. Open your terminal and navigate to the project directory. Run the following command to install these libraries:

 

 

npm install formik yup

 

 

Step 2: Create a Form Component

 

 

Let’s create a simple form component with two fields – name and email. We will also add a submit button to the form. Here is the code for the form component:

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
 
const validationSchema = Yup.object().shape({
  name: Yup.string().required("Name is required"),
  email: Yup.string().email("Invalid email").required("Email is required"),
});
 
const initialValues = {
  name: "",
  email: "",
};
 
const onSubmit = (values) => {
  console.log(values);
};
 
const FormValidation = () => {
  return (
    <div>
      <h1>Form Validation</h1>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={onSubmit}
      >
        {({ errors, touched }) => (
          <Form>
            <div>
              <label htmlFor="name">Name</label>
              <Field type="text" name="name" />
              <ErrorMessage name="name" />
            </div>
 
            <div>
              <label htmlFor="email">Email</label>
              <Field type="email" name="email" />
              <ErrorMessage name="email" />
            </div>
 
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};
 
export default FormValidation;

 

 

In the above code, we have defined the validation schema using Yup. The validation schema defines the rules for each form field. We have defined the name field as required and the email field as required and valid email. We have also defined the initial values for the form fields and the onSubmit function that will be called when the form is submitted.

 

 

In the Formik component, we have passed the initialValues, validationSchema, and onSubmit props. The Form component is used to wrap the form fields. We have used the Field component to define the form fields and the ErrorMessage component to display the error messages for each field.

 

 

Step 3: Test the Form

 

 

Let’s test the form by rendering it in the App component. Here is the code for the App component:

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import FormValidation from "./FormValidation";
 
const App = () => {
  return (
    <div>
      <FormValidation />
    </div>
  );
};
 
export default App;

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme