[SOLVED] validations in formik librabry using yup

Issue

I have this component called Signup in react with typescript project:

import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import girlImage from "../../images/girl_img.png";
import "./Signup.css";

function Signup() {
  const formik = useFormik({
    initialValues: {
      photo: "",
      name: "",
      email: "",
      phone: "",
      password: "",
      cpassword: "",
    },
    validationSchema: Yup.object({
      //name: Yup.string.required(""),
      email: Yup.string().email("invalid email").required("required"),
      password: Yup.string().required("Password is required"),
      cpassword: Yup.string().oneOf(
        [Yup.ref("password"), null],
        "Passwords must match"
      ),
    }),
    onSubmit: (values) => {
      console.log(values);
      //formik.resetForm();
    },
  });
  return (
    <div className="signup">
      <div className="container">
        <div className="two-col-wrap">
          <div className="left-block">
            <h1 className="title">Signup</h1>
            <form>
              <div className="form-control">
                <label htmlFor="photo" id="photo-label">
                  Photo +
                </label>
                <input type="file" id="photo" name="photo" />
              </div>
              <div className="form-control">
                <label htmlFor="name">Name</label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  value={formik.values.name}
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                />
              </div>
              <div className="form-control">
                <label htmlFor="email">Email</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formik.values.email}
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                />
              </div>
              <div className="form-control">
                <label htmlFor="phone">PhoneNo</label>
                <input type="tel" id="phone" name="phone" />
              </div>
              <div className="form-control">
                <label htmlFor="password">Password</label>
                <input type="password" id="password" name="password" />
              </div>
              <div className="form-control">
                <label htmlFor="cpassword">Confirm Password</label>
                <input type="password" id="cpassword" name="cpassword" />
              </div>
              <div className="buttons-container">
                <button className="submit-btn">submit</button>
                <button className="reset-btn">Reset</button>
              </div>
            </form>
          </div>
          <div className="right-block">
            <img src={girlImage} alt="girl" />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Signup;

I am new to formik and want to implement these validation in formik with Yup.
Name: required, at least 15 char.
email: validate email convention, required
phoneNo: Indian phone no. is only valid, required
password and confirm password should match and also
the image should be of type jpg or png, or less than 2Mb

Any help please?

Solution

This worked for me :

const phoneRegExp = /^[6-9]\d{9}$/;

    validationSchema: Yup.object({
          email: Yup.string().email("invalid email").required("required"),
          phone: Yup.string().matches(phoneRegExp, "Phone number is not valid"),
          password: Yup.string().required("Password is required"),
          name: Yup.string()
            .min(15, "min 15 characters are required")
            .required("name is required"),
          cpassword: Yup.string().oneOf(
            [Yup.ref("password"), null],
            "Passwords must match"
          ),
        }),

Answered By – front_dev_j

Answer Checked By – Mary Flores (BugsFixing Volunteer)