React form hooks How to validate select option

Question

I am working with reach hooks and to validate my form fields I am using react-hook-form as it is the best option for now

SO to validating my normal input fields I am doing just ref={register({ required: true })} then on submit it is checking for errors as I am importing errors from react-hook-form

But when I am doing same for select field it is not checking the error object

This is what I am doing

<label htmlFor="func" className="form_label">
      Select function
    </label>
    <select name="func" ref={register({ required: true })}>
      <option selected disabled>
        Select function
      </option>
      <option value="5">Function 2</option>
      <option value="6">Function 3</option>
    </select>
    {errors.func && (
      <div>
        <span>Function is required</span>
      </div>
    )}

I don't know what I am missing

My actual code is with dynamic data

so I am looping it like this

<Form.Control as="select" custom>
                    <option disabled selected>Select role</option>
                    {loading === false &&
                    data.get_roles.map((li) => (
                    <option value={li.user_type_id}> 
                    {li.user_type}</option>
        ))}
            </Form.Control>

React hook form

Solution

try this code. I tried and it worked fine:

<label htmlFor="func" className="form_label">
  Select function
</label>
<select name="func" 
  ref={register({
     required: "select one option"
  })}>
  <option value=""></option>
  <option value="5">Function 2</option>
  <option value="6">Function 3</option>
</select>
{errors.func && <p style={{color:'red'}}> {errors.func.message}</p> }

Comments

[vivek singh]

It is not working could you please share code sandbox

[Agner Souza Bezerra]

I hope this will help you code sandbox

[James Bond]

But where is a validation? You just set the select field as required.