CODEWITHSUNDEEP
reactjsmaterial-uireact-hook-form
Kamlesh
Kamlesh

Reputation: 6135

Multiple validations on a form element does not work when using material ui

am using material ui for my website ui and also using react-hook-form. My code is as:

<TextField
            name="firstName"
            id="firstName"
            label="First Name"
            ref={register({ required: true, minLength: 6 })}
          />
          <div>
            {errors.firstName?.type === "required" && (
              <div className={classes.errorMsg}>First Name is required.</div>
            )}
            {errors.firstName?.type === "minLength" && (
              <div className={classes.errorMsg}>
                First Name length should be more than 6 characters.
              </div>
            )}
          </div>

I am trying to apply multiple validations on firstName element but only 'required' is working. I enter any value less than 6 characters then react-hook-form should show 'minLength' error which is not working.

Kindly suggest me this is an issue of react-hook-form or i am doing something wrong to apply. Thanks a lot.

Upvotes: 0

Views: 517

Answers (1)

First Arachne
First Arachne

Reputation: 829

You can use inputRef instead of ref

<TextField
    name="firstName"
    id="firstName"
    label="First Name"
    inputRef={register({ required: true, minLength: 6 })}
  />

Upvotes: 1

Related Questions