How to Create and Validate Forms in React using Formik and YUP

STRUCTURE

 

SignUp.js

import React from 'react';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import { useNavigate } from 'react-router-dom';
export const Signup = () => {
  const navigate = useNavigate();
  const validate = Yup.object({
    firstName: Yup.string()
      .max(15, 'Must be 15 characters or less')
      .required('First Name Required !'),
    lastName: Yup.string()
      .max(20, 'Must be 20 characters or less !')
      .required('Required'),
    email: Yup.string()
      .email('Email is invalid !')
      .required('Email is required !'),
    password: Yup.string()
      .min(6, 'Password must be at least 6 charaters')
      .required('Password is required !'),
    confirmPassword: Yup.string()
      .oneOf([Yup.ref('password'), null], 'Password must match !')
      .required('Confirm password is required !'),
  });
  const initialValues = {
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    confirmPassword: '',
  };
  const {
    values,
    errors,
    touched,
    handleBlur,
    handleChange,
    handleSubmit,
    handleReset,
    resetForm,
    setFieldValue,
    setFieldTouched,
  } = useFormik({
    initialValues: initialValues,
    validationSchema: validate,
    enableReinitialize: true,
    validateOnChange: false,
    onSubmit: async (values, action) => {
      // console.log(values)
      resetForm();
      toast.success('Successfully Registered !', {
        position: 'top-right',
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: false,
        theme: 'colored',
      });
    },
  });
  return (
    <>
      <ToastContainer /> //important
      <div className="container mt-5 ">
        <div className="row justify-content-center">
          <div className="col-md-5 border py-4 px-4 col-10 formcontainer">
            <h1 className="mb-4 font-weight-bold display-4 title">
              Register Now
            </h1>
            <form onSubmit={handleSubmit} encType="multipart/form-data">
              <div className="mb-2">
                <label htmlFor="firstName">First Name</label>
                <input
                  type="text"
                  id="text"
                  name="firstName"
                  className={`form-control shadow-none ${
                    touched.firstName && errors.firstName && 'is-invalid'
                  }`}
                  value={values.firstName}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
                {errors.firstName && touched.firstName ? (
                  <span className=" text-danger errorMsg">
                    {errors.firstName}
                  </span>
                ) : null}
              </div>

              <div className="mb-2">
                <label htmlFor="lastName">Last Name</label>
                <input
                  type="text"
                  id="lastName"
                  name="lastName"
                  className={`form-control shadow-none ${
                    touched.lastName && errors.lastName && 'is-invalid'
                  }`}
                  value={values.lastName}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />

                {errors.lastName && touched.lastName ? (
                  <span className=" text-danger errorMsg">
                    {errors.lastName}
                  </span>
                ) : null}
              </div>

              <div className="mb-2">
                <label htmlFor="email">Email</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  className={`form-control shadow-none ${
                    touched.email && errors.email && 'is-invalid'
                  }`}
                  value={values.email}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />

                {errors.email && touched.email ? (
                  <span className=" text-danger errorMsg">{errors.email}</span>
                ) : null}
              </div>

              <div className="mb-2">
                <label htmlFor="password">Password</label>
                <input
                  type="password"
                  id="password"
                  name="password"
                  className={`form-control shadow-none ${
                    touched.password && errors.password && 'is-invalid'
                  }`}
                  value={values.password}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />

                {errors.password && touched.password ? (
                  <span className=" text-danger errorMsg">
                    {errors.password}
                  </span>
                ) : null}
              </div>

              <div className="mb-2">
                <label htmlFor="password">Password</label>
                <input
                  type="password"
                  id="confirmPassword"
                  name="confirmPassword"
                  className={`form-control shadow-none ${
                    touched.confirmPassword &&
                    errors.confirmPassword &&
                    'is-invalid'
                  }`}
                  value={values.confirmPassword}
                  onChange={handleChange}
                  onBlur={handleBlur}
                />
                {errors.confirmPassword && touched.confirmPassword ? (
                  <span className=" text-danger errorMsg">
                    {errors.confirmPassword}
                  </span>
                ) : null}
              </div>
              <button className="btnsubmit mt-3 shadow-none" type="submit">
                Register
              </button>
              <button
                className="btnreset mt-3 mx-3 shadow-none"
                type="reset"
                onClick={handleReset}
              >
                Reset
              </button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

 

Direct Download From GitHub

 

Download

427.11 KB