在空输入提交时显示值类型错误消息而不是必需的错误消息

Question

我同时使用了 react-hook-form 和 yup，但出于某种原因，它显示了错误的错误消息。

当提交表单时 phone 数字输入留空时，它会显示 typeError 错误消息而不是 'required' 错误消息，我不明白为什么输入后会发生这种情况字段为空，没有确定其类型是否为 'number' 的值。

import { yupResolver } from "@hookform/resolvers/yup";
import { useForm } from "react-hook-form";
import * as yup from "yup";

const schema = yup.object().shape({
  name: yup.string().required("Field is required*"),
  email: yup.string().email().required("Field is required*"),
  phoneNumber: yup
    .number()
    .required("Field is required*") //this message should be displayed instead of typeError message
    .typeError("Value must be a number*"),
  message: yup.string().required("Please provide your message*")
});


export default function App() {
  const {
    reset,
    register,
    handleSubmit,
    formState: { errors }
  } = useForm({ resolver: yupResolver(schema) });

  const submitForm = (data) => {
    console.log(data);
    reset();
  };


  return (
    <div className="App">
               <form className="contact-form" onSubmit={handleSubmit(submitForm)}>
            <h2>Send Us a Message </h2>
            <p>
              <label for="name">Name</label>
              <input name="name" type="text" {...register("name")} />
              <p className="error-msg"> {errors.name?.message} </p>
            </p>

            <p>
              <label for="email">Email</label>
              <input name="email" type="text" {...register("email")} />
              <p className="error-msg"> {errors.email?.message} </p>
            </p>

            <p>
              <label for="phoneNumber">Phone</label>
              <input
                name="phoneNumber"
                type="text"
                {...register("phoneNumber")}
              />
            </p>
            <p className="error-msg"> {errors.phoneNumber?.message} </p>
            <input type="submit"  id="submit" />
            </form>
    </div>
  );

Answer 1

因为 Yup 收到一个空字符串而不是一个数字，它认为您传递了错误的类型。如果输入为空，你需要告诉 RHF return undefined:

<input
  name="phoneNumber"
  type="text"
  {...register("phoneNumber", {
    setValueAs: (v) => {
      return v === "" ? undefined : parseInt(v, 10);
    }
  })}

在空输入提交时显示值类型错误消息而不是必需的错误消息

Value type error message displaying instead of required error message on empty input submission

validation

reactjs

yup

react-hook-form