validations in formik librabry using yup

Question

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?

Looks like your on the way of adding the validations. What issue are you having? — Disco, Mar 17 '22 at 12:17
i can't find how to validate indian phone no and image validation. — front_dev_j, Mar 17 '22 at 12:39
You should be able to use a regular expression to check if the number is a valid phone number see this [Regular Expression Validation For Indian Phone Number and Mobile number](https://stackoverflow.com/questions/18351553/regular-expression-validation-for-indian-phone-number-and-mobile-number) — Disco, Mar 17 '22 at 12:50

score 0 · Accepted Answer · answered Mar 17 '22 at 13:36

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"
          ),
        }),

validations in formik librabry using yup

1 Answers1