是的，需要验证不起作用，并且不会为空字段提供错误

Question

我正在使用 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>

Answer 1

尝试以下操作：

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 属性与 updateProfile 函数一起传递给 handleSubmit 函数。

是的，需要验证不起作用，并且不会为空字段提供错误

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

reactjs

yup

formik