Validate select list with react-hook-form

Question

I want to implement validation for React form using react-hook-form. For input value I implemented this:

       <div className='input-group mb-3'>
          <Controller
              control={control}
              name={"email"} //  the key of json
              defaultValue={""}
              render={({ field }) => (
                  <input
                      {...field}
                      type="email"
                      className="form-control"
                      placeholder="Email"
                      aria-label="email"
                      onChange={(e) => field.onChange(e.target.value)}
                  />
              )}
          />
        </div>

For me it's not clear how I need to implement it for select menu:

            <div className='input-group mb-3'>
              <select
                className='form-control form-select'
                name='budget'
                id='budget'
                required=''
                data-msg='Please select your budget.'
              >
                <option value=''>Budget</option>                  
                <option value='budget3'>More than $500,000</option>
              </select>
            </div>

Wat is the proper way to implement it?

Fer Toasted · Accepted Answer · 2022-08-14 02:02:51Z

1

somethings like this works?

<Controller
  control={control}
  name="budget"
  rules={{
    budget: {
      required: "Required",
    },
  }}
  render={({ field }) => (
    <select name="budget" onChange={field.onChange} value={field.value}>
      <option value="">Please select your budget</option>
      <option value="budget3">More than $500,000</option>
      <option value="budget2">$250,000 - $500,000</option>
      <option value="budget1">$100,000 - $250,000</option>
      {/* more budgets */}
    </select>
  )}
/>;

control is destructured from useForm like so:

const { controls, register, setValue, ...moreEls } = useForm();

answered Aug 14, 2022 at 2:02

Fer Toasted

1,7581 gold badge21 silver badges39 bronze badges

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

2 Comments

Peter Penzov Over a year ago

Thanks, the code is working but there is no validation message. I opened a new question stackoverflow.com/questions/73351493/… Can you advise please?

Fer Toasted Over a year ago

You can destructure errors from useForm and display the errors.budget?.message somewhere in a DOM element like <label>{errors.budget?.message}</label>

Collectives™ on Stack Overflow

Validate select list with react-hook-form

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related