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>

Answer 1

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.