How to validate react-select dropdown using use form hook in react

Question

I am new to yup validation, and I am populating the react-select dropdown with the below options. and now when I click on one button trying to validate if any value is selected or not. but it is not validating. any help is much appreciated.

const options = [
        { value: 'active', label: 'Active' },
        { value: 'inactive', label: 'In Active' },
        { value: 'deleted', label: 'Delete' },
 ];

<Select
  defaultValue={options[0]}
  isSearchable={false}
  className="react-dropdown"
  onChange={statusDropdownHandleChange}
  classNamePrefix="dropdown"
  options={options}
  name="status"
  {...register("status")}
/>


let schema = yup.object().shape({
    status: yup.object().shape({
      label: yup.string().required("status is required"),
      value: yup.string().required("status is required")
    })
 });

Mic Fung · Accepted Answer · 2021-07-12 14:43:12Z

11

The validation should be working but if you are using Select with react-hook-form directly, you will hit the error/value undefined when choosing value/submitting form as Select doesn't expose input's ref. Therefore, you need to wrap Select with Controller to register the component.

For validating the form, there is one more case to handle if you allow isClearable in Select where the value will be null instead of {label: undefined, value: undefined} so there is a need to add .nullable() and .required() at the end of status's validation.

validation

const schema = yup.object().shape({
  status: yup
    .object()
    .shape({
      label: yup.string().required("status is required (from label)"),
      value: yup.string().required("status is required")
    })
    .nullable() // for handling null value when clearing options via clicking "x"
    .required("status is required (from outter null check)")
});

form with react-select

<form onSubmit={handleSubmit(onSubmit)}>
    <Controller
        name="status"
        control={control}
        render={({ field }) => (
        <Select
            // defaultValue={options[0]}
            {...field}
            isClearable
            isSearchable={false}
            className="react-dropdown"
            classNamePrefix="dropdown"
            options={options}
        />
        )}
    />
    <p>{errors.status?.message || errors.status?.label.message}</p>
    <input type="submit" />
</form>

Here is the codesandbox

answered Jul 12, 2021 at 14:43

Mic Fung

5,7102 gold badges13 silver badges21 bronze badges

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

6 Comments

Dileep Over a year ago

Thanks a lot, Mic. I spent a lot of time on it.

Daniela Over a year ago

I had never valued a StackOverflow response this much. There is a very vague description on the react-hook-form official site ( link ) "... If the component doesn't expose input's ref, ..." and your response to this question made it all very clear to me. I had spent many hours in this. Thank you for your kindness. God bless you!

abhiburk Over a year ago

and if select is multipe ? will it be array instead of object

Kavin404 Over a year ago

is there a way to return only the value?

hungify Over a year ago

Are you sure react-select doesn't expose input ref?. You can use both register or Controller.

|

Collectives™ on Stack Overflow

How to validate react-select dropdown using use form hook in react

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related