验证选择框

Question

我正在使用jQuery插件验证来验证表单.我有一个如下所示的选择列表:

<select id="select">
<option value="">Choose an option</option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

现在,我想确保用户选择"选择一个选项"(默认选项)之外的任何内容.因此,如果您选择第一个选项,它将无法验证.如何才能做到这一点？

Answer 1

只需在select中添加一个必需的类

<select id="select" class="required">

Answer 2

对于初学者,您可以"禁用"该用户意外选择的选项:

<option value="" disabled="disabled">Choose an option</option>

然后,在JavaScript事件内部(无论是jQuery还是JavaScript),为了验证表单是否已设置,请执行以下操作:

select = document.getElementById('select'); // or in jQuery use: select = this;
if (select.value) {
  // value is set to a valid option, so submit form
  return true;
}
return false;

或者那种效果.

Answer 3

我不知道在问问题时（2009年）插件的情况如何，但是我今天遇到了同样的问题，并通过以下方式解决了该问题：

1. 给您的选择标签一个名称属性。例如在这种情况下

   <select name="myselect">

2. 代替使用标签选项中的属性value =“ default”，而是按照Jeremy Visser的建议禁用默认选项，或设置value =“”

   <option disabled="disabled">Choose...</option>

   要么

   <option value="">Choose...</option>

3. 设置插件验证规则

   $( "#YOUR_FORM_ID" ).validate({ rules: { myselect: { required: true } } });

   要么

   <select name="myselect" class="required">

观察：仅在您的表单中只有一个选择时，redsquare的解决方案才有效。如果您希望他的解决方案可以使用多个选项，请在您的选择中添加名称属性。

希望能帮助到你！:)