反应表单钩子如何验证选择选项

Posted 2023-02-22

【中文标题】反应表单钩子如何验证选择选项

【英文标题】：React form hooks How to validate select option

【发布时间】：2020-10-15 20:57:24

【问题描述】：

我正在使用到达挂钩并验证我正在使用react-hook-form 的表单字段，因为它是目前最好的选择

所以要验证我的正常输入字段，我只是在做 ref=register( required: true ) 然后提交它正在检查错误，因为我正在从 react-hook-form 导入错误

但是当我对选择字段做同样的事情时，它不会检查错误对象

这就是我正在做的事情

<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>
    )

我不知道我错过了什么

我的实际代码是动态数据

所以我是这样循环的

<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

【问题讨论】：

我认为您缺少空值 =“”的默认选择

@Bill 我什么都试过了，你能帮我写一些代码吗

看看这个 CSB：codesandbox.io/s/infallible-tereshkova-x65qr?file=/src/App.js

【参考方案1】：

试试这个代码。我试过了，效果很好：

<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> 

【讨论】：

它不起作用，请您分享代码沙箱

希望对您有所帮助code sandbox