React Form Validation with Formik and Submit handler

Level : Advanced

Mentor: Shailendra Chauhan

Duration : 00:02:00

What Are Formik and Yup?

Formik is a popular React library that simplifies form management by handling form state, validation, and submission. Yup, on the other hand, is a validation library that allows you to define and enforce schema validation rules in a declarative manner. Together, Formik and Yup provide a powerful solution for building robust and validated forms in React.

Example

// Example using Formik and Yup
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const validationSchema = Yup.object({
 name: Yup.string().required('Name is required'),
 email: Yup.string().email('Invalid email').required('Email is required'),
});
// Formik usage
<Formik
 initialValues={{ name: '', email: '' }}
 validationSchema={validationSchema}
 onSubmit={(values) => {
  // Handle form submission
 }}
>
 <Form>
  <div>
   <label htmlFor="name">Name</label>
   <Field type="text" id="name" name="name" />
   <ErrorMessage name="name" />
  </div>
  <div>
   <label htmlFor="email">Email</label>
   <Field type="email" id="email" name="email" />
   <ErrorMessage name="email" />
  </div>
  <button type="submit">Submit</button>
 </Form>
</Formik>

Formik, HTML Input Fields and Custom Validation Rules

Formik seamlessly integrates with HTML input fields and allows you to define custom validation rules using Yup. This enables you to create complex form validations with ease while keeping your React code clean and maintainable.

Example

// Example with custom validation using Formik and Yup
const validationSchema = Yup.object({
 password: Yup.string()
  .required('Password is required')
  .min(8, 'Password must be at least 8 characters'),
 confirmPassword: Yup.string()
  .oneOf([Yup.ref('password'), null], 'Passwords must match')
  .required('Confirm Password is required'),
});
// Formik usage
<Formik
 initialValues={{ password: '', confirmPassword: '' }}
 validationSchema={validationSchema}
 onSubmit={(values) => {
  // Handle form submission
 }}
>
 <Form>
  <div>
   <label htmlFor="password">Password</label>
   <Field type="password" id="password" name="password" />
   <ErrorMessage name="password" />
  </div>
  <div>
   <label htmlFor="confirmPassword">Confirm Password</label>
   <Field type="password" id="confirmPassword" name="confirmPassword" />
   <ErrorMessage name="confirmPassword" />
  </div>
  <button type="submit">Submit</button>
 </Form>
</Formik>

Validation Using Formik's Components and Yup

Formik provides a set of components like <Field>, <Form>, and <ErrorMessage> that work in harmony with Yup's validation schema. These components make it straightforward to create validated forms in React.

Example

// Example using Formik components with Yup validation
const validationSchema = Yup.object({
 age: Yup.number().required('Age is required').min(18, 'Must be at least 18 years old'),
});
// Formik usage
<Formik
 initialValues={{ age: '' }}
 validationSchema={validationSchema}
 onSubmit={(values) => {
  // Handle form submission
 }}
>
 <Form>
  <div>
   <label htmlFor="age">Age</label>
   <Field type="number" id="age" name="age" />
   <ErrorMessage name="age" />
  </div>
  <button type="submit">Submit</button>
 </Form>
</Formik>

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.