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

Question

Expected behaviour: When the form submit button is hit before anything is in the text input, the error message is displayed.

Current behaviour: The error message is only displayed once in input has a value, even after hitting submit. Meaning the user has to click on and type in the textfield before the error message will appear.

Minimal codesandbox demo

I know it was possible to do this in earlier versions of react-hook-form, I think it was the default behaviour actually, surely theres still a way? It seems so simple.

<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>

benmneb · Accepted Answer · 2021-08-11 14:54:03Z

4

Okay I realised it can be fixed easily by changing

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

to

{...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" }
        })}

Very cool.

Relevant react-hook-form docs.

edited Aug 11, 2021 at 14:54

answered Jul 30, 2021 at 14:16

benmneb

2,3532 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hendra · Accepted Answer · 2021-07-30 14:18:47Z

0

You need to provide a message, otherwise the field will just turn red

{...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" }
})}

answered Jul 30, 2021 at 14:18

hendra

2,6515 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related