没有提交表单的错误信息

Question

我正在使用 yup 进行验证，一切正常。所以是这样的：

    const HISTORY = useHistory();
    
      const [inputs, setInputs] = useState({
        Name: "",
        Surname: "",
      });
    
      const handleChange = (inputName) => (e) => {
        e.preventDefault();
    
        setInputs({
          ...inputs,
          [inputName]: e.target.value,
        });
      };
    
      const Continue = async (e) => {
        e.preventDefault();
        let formData = {
          Name: inputs.Name,
          Surname: inputs.Surname,
        };
    
        const isValid = await orderFormValidation.isValid(formData);
        if(isValid) {
          HISTORY.push({ pathname: "/checkout", state: inputs });
        }
      };
    
      return (
        <Form className="instantquote p-3 mb-5">
          <Form.Group controlId="formGroupFrom">
            <Form.Label className="form-subtitle">Name</Form.Label>
            <Form.Control
              type="text"
              placeholder="Name"
              name="Name"
              onChange={handleChange("Name")}
              defaultValue={inputs.Name}
            />
            {/* TODO: ERROR MESSAGE */}
          </Form.Group>
          

<Form.Group controlId="formGroupFrom">
            <Form.Label className="form-subtitle">Surname</Form.Label>
            <Form.Control
              type="text"
              placeholder="Surname"
              name="Surname"
              onChange={handleChange("Surname")}
              defaultValue={inputs.Surname}
            />
            {/* TODO: ERROR MESSAGE */}
          </Form.Group>
          <button className="btn button" onClick={Continue}>
            Details
            <BsArrowRightShort />
          </button>
        </Form>
      );

所以基本上，isValid 是正确的。因此，例如，如果其中一个字段为空，则它 returns false 并且不会转到下一页，在我们的例子中是结帐页面。所以我的问题是我想给出一条错误消息，但我不知道该怎么做，因为我没有提交表格。这也是我的验证：

export const orderFormValidation = yup.object().shape({
  Name: yup
    .string()
    .min(3, "Too Short!")
    .max(5, "Too Long!")
    .required("Name Required"),
Surname: yup
    .string()
    .min(3, "Too Short!")
    .max(5, "Too Long!")
    .required("Surname Required"),
});

Answer 1

您可以像这样添加状态来接受错误消息：

 const HISTORY = useHistory();

  const [inputs, setInputs] = useState({
    Name: "",
    Surname: "",
  });
  const [name, setName] = useState("");
  const [surName, setSurName] = useState("");
  const handleChange = (inputName) => (e) => {
    e.preventDefault();

    setInputs({
      ...inputs,
      [inputName]: e.target.value,
    });
  };
  const nameValidation = yup.object().shape({
    Name: yup
      .string()
      .required("Name Required")
      .min(3, "Too Short!")
      .max(5, "Too Long!"),
  });
  const surNameValidation = yup.object().shape({
    Surname: yup
      .string()
      .required("Surname Required")
      .min(3, "Too Short!")
      .max(5, "Too Long!"),
  });
  const Continue = async (e) => {
    e.preventDefault();
    let formData = {
      Name: inputs.Name,
      Surname: inputs.Surname,
    };
    const isValidSurName = await surNameValidation.isValid(formData);
    const isValidName = await nameValidation.isValid(formData);
    if (isValidName) {
      setName("");
    } else {
      nameValidation.validate(formData).catch((ex) => {
        setName(ex.message);
      });
    }
    if (isValidSurName) {
      setSurName("");
    } else {
      surNameValidation.validate(formData).catch((ex) => {
        setSurName(ex.message);
      });
    }
    if (isValidName && isValidSurName) {
      HISTORY.push({ pathname: "/checkout", state: inputs });
    }
  };

  return (
    <Form className="instantquote p-3 mb-5">
      <Form.Group controlId="formGroupFrom">
        <Form.Label className="form-subtitle">Name</Form.Label>
        <Form.Control
          type="text"
          placeholder="Name"
          name="Name"
          onChange={handleChange("Name")}
          defaultValue={inputs.Name}
        />
        <p>{name}</p>
      </Form.Group>

      <Form.Group controlId="formGroupFrom">
        <Form.Label className="form-subtitle">Surname</Form.Label>
        <Form.Control
          type="text"
          placeholder="Surname"
          name="Surname"
          onChange={handleChange("Surname")}
          defaultValue={inputs.Surname}
        />
        <p>{surName}</p>
      </Form.Group>
      <button className="btn button" onClick={Continue}>
        Details
      </button>
    </Form>
  );

如果您有更多字段，您应该将验证提取到新组件

没有提交表单的错误信息

error message without submitting the form

validation

reactjs

yup