`react-hook-form` 在空输入时显示错误信息

Question

预期行为： 当在文本输入中输入任何内容之前点击表单提交按钮时，将显示错误消息。

当前行为： 错误消息仅在输入有值时显示一次，即使在点击提交之后也是如此。这意味着用户必须在出现错误消息之前单击并输入文本字段。

我知道在 react-hook-form 的早期版本中可以这样做，我认为这实际上是默认行为，肯定还有办法吗？看起来很简单。

<form className="App" onSubmit={handleSubmit(submitForm)}>
      <TextField
        label="Attribution"
        variant="outlined"
        helperText={
          Boolean(errors.attribution)
            ? errors.attribution.message
            : "Who is being quoted?"
        }
        {...register("attribution", {
          required: true,
          minLength: { value: 3, message: "Please enter a longer name" },
          maxLength: { value: 50, message: "Please enter a shorter name" }
        })}
        error={Boolean(errors.attribution)}
      />
      <Button type="submit">Submit</Button>
    </form>

Answer 1

好的，我意识到可以通过更改

轻松修复它

{...register("attribution", {
          required: true,
          minLength: { value: 3, message: "Please enter a longer name" },
          maxLength: { value: 50, message: "Please enter a shorter name" }
        })}

到

{...register("attribution", {
          required: 'Your name is required', // <- right here
          minLength: { value: 3, message: "Please enter a longer name" },
          maxLength: { value: 50, message: "Please enter a shorter name" }
        })}

非常酷。

Relevant react-hook-form docs.

Answer 2

您需要提供消息，否则该字段只会变成红色

{...register("attribution", {
   required: { value: true, message: "Field is required" },
   minLength: { value: 3, message: "Please enter a longer name" },
   maxLength: { value: 50, message: "Please enter a shorter name" }
})}

`react-hook-form` 在空输入时显示错误信息

`react-hook-form` display error message on empty input

reactjs

material-ui

react-hook-form