How to validate select input field using React Hook Form?

Question

I'm trying to validate a form made using form fields from React MD by using React Hook Form. The text input fields are working fine.

But the validations aren't working on the select field. Here is the code:

<Controller
  control={control}
  name="salutation"
  defaultValue=""
  rules={{ required: "Salutation is required" }}
  disabled={isSubmitting}
  render={(props) => (
     <Select
       id="salutation"
       {...props}
       label="Salutation"
       options={SALUTATION_ITEMS}
       value={salutationValue}
       onChange={(e) => handleSalutationChange(e)}
       disableLeftAddon={false}
       rightChildren={
          <RiArrowDownSFill className="dropDownArrow" />
       }
     />
   );
  }}
/>

The error persists even after the user selects a value:

{errors.salutation && (
  <div className="validation-alert msg-error ">
    <p>{errors.salutation.message}</p>
  </div>
)}

I'm probably missing something or doing something wrong.

Ajeet Shah · Accepted Answer · 2021-02-23 13:18:05Z

3

I think you are missing props.value and props.onChange(e) and you may not need handleSalutationChange(e):

<Controller
  control={control}
  name="salutation"
  defaultValue=""
  rules={{ required: "Salutation is required" }}
  disabled={isSubmitting}
  render={(props) => (
     <Select
       id="salutation"
       {...props}
       label="Salutation"
       options={SALUTATION_ITEMS}
       value={props.value} // This one: props.value
       onChange={(e) => {
         props.onChange(e)   // I think you are missing this
         handleSalutationChange(e) // NOT Needed ?
       }}
       disableLeftAddon={false}
       rightChildren={
          <RiArrowDownSFill className="dropDownArrow" />
       }
     />
   );
  }}
/>

answered Feb 23, 2021 at 13:18

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

Collectives™ on Stack Overflow

How to validate select input field using React Hook Form?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related