website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

how-to-create-and-validate-forms-in-react-using-formik-and-yup

Formik and YUP in React JS | How to Create and Validate Forms in React using Formik and Yup

  • 42
  • 26-Dec-2022
  • Details

    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

     

Preview
whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat