Yup required validation not working and not giving error for empty field

Question

I'm working on a form using formik and yup. I have added required schema, but it is not working. I can easily save having empty input fields. I have tried and googled but nothing worked. I want to make it mandatory and it should give error if field is empty.

snippet of yup schema validation

 opening_time: Yup.string().required("Opening time is Requried"),
    closing_time: Yup.string().required("Closing time is Requried"),
    address: Yup.string().required("Address is Requried"),
    about: Yup.string().required("About is Required"),

Input field snippet

 <div class="form-group mb-0">
                    <label>
                      About<span className="text-danger">*</span>
                    </label>
                    <textarea
                      name="about"
                      onChange={formik.handleChange}
                      value={formik.values.about}
                      class="form-control"
                      rows="5"
                      required
                    />
                    {formik.touched.about && formik.errors.about ? (
                      <div className="err">
                        {formik.errors.about}
                        {console.log(formik.errors.about)}
                      </div>
                    ) : null}
                  </div>

Are the input fields wrapped in a form tag with Formik's handleSubmit function passed to the form tag's onSubmit attribute, i.e. <form onSubmit={handleSubmit}></form>? — Shamar Yarde
I have used my own save button like this, onClick={(e) => updateDoctorProfile(e, formik.values)} — Vishal Kumar

Shamar Yarde Shamar Yarde · Accepted Answer · 2021-08-09T14:16:00

Try the following:

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  opening_time: Yup.string().required("Opening time is Requried"),
  closing_time: Yup.string().required("Closing time is Requried"),
  address: Yup.string().required("Address is Requried"),
  about: Yup.string().required("About is Required"),
});

function ValidationSchemaExample() {

  function updateDoctorProfile(e, values) {
    console.log(`e: ${e}`);
    console.log(`values: ${values}`)
  }

  return (
    <div>
      <h1>Signup</h1>
      <Formik
        initialValues={{
          opening_time: "",
          closing_time: "",
          address: "",
          about: "",
        }}
        validationSchema={SignupSchema}
        onSubmit={values => {
          // same shape as initial values
          console.log(values);
        }}
      >
        {({ values, errors, touched, handleChange, handleSubmit, isSubmitting }) => (
          < div className="form-group mb-0">
            <label>
              About<span className="text-danger">*</span>
            </label>
            <textarea
              name="about"
              onChange={handleChange}
              value={values.about}
              className="form-control"
              required
            />
            <button type="submit" onClick={(e) => {
              handleSubmit();
              updateDoctorProfile(e, values);
            }} disabled={isSubmitting}>
              Submit
            </button>
            {touched.about && errors.about ? (
              <div className="err">
                {errors.about}
                {console.log(errors.about)}
              </div>
            ) : null}
          </div>
        )}
      </Formik>
    </div >
  );
}

export default ValidationSchemaExample;

The only change is that the button tag's onClick attribute is passed the handleSubmit function along with your updateProfile function.

Yup required validation not working and not giving error for empty field

1 Answers