Да, требуемая проверка не работает и не выдает ошибку для пустого поля

avatar
Vishal Kumar
8 августа 2021 в 15:48
2018
1
0

Я работаю над формой, используя formik и yup. Я добавил необходимую схему, но она не работает. Я могу легко сохранить пустые поля ввода. Я пробовал и гуглил, но ничего не получалось. Я хочу сделать его обязательным, и он должен выдавать ошибку, если поле пусто.

фрагмент проверки схемы yup

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

Фрагмент поля ввода

 <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>
Источник
Shamar Yarde
8 августа 2021 в 16:20
0

Поля ввода заключены в тег формы с функцией formik handleSubmit, переданной в атрибут onSubmit тега формы, т. е. <form onSubmit={handleSubmit}></form>?

Vishal Kumar
8 августа 2021 в 19:34
0

Я использовал свою собственную кнопку сохранения, например, onClick={(e) => updateDoctorProfile(e, formik.values)}

Ответы (1)

avatar
Shamar Yarde
9 августа 2021 в 14:16
0

Попробуйте следующее:

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;

Единственное изменение заключается в том, что атрибут onClick тега кнопки передается функции handleSubmit вместе с вашей функцией updateProfile.

Vishal Kumar
11 августа 2021 в 15:02
0

Спасибо, это не совсем решило мой вопрос, но помогло мне найти решение. Поэтому отмечаю ответ галочкой :)