如何在 jquery-validation 中验证选择框？答案

【问题标题】：How to validate a select box in jquery-validation?如何在 jquery-validation 中验证选择框？
【发布时间】：2017-07-19 19:27:02
【问题描述】：

如何检查多个表单中的选定框？我的第一个选项是<option selected disabled hidden style="display:none" value="default"></option>

我的小提琴：http://jsfiddle.net/K6Tkn/91/

尽管选择框有一个必需的属性，但它只验证输入字段。

当我单击警报按钮时如何检查验证？在此示例中，我必须填写输入，然后单击发送按钮，然后单击警报按钮。

$(document).ready(function() {
  $('form').each(function() {
    $(this).validate({
      submitHandler: function(form) { // for demo
        $('#test').on('click', function() {
          alert('valid form'); //should simulate a next button for multi step form
        });
        return false;
      }
    });
  });
});

<form>
  <input type="text" name="username" minlength="3" required="required" />
  <select id="selectCatalog" name="selectCatalog" class="form-control">
    <option selected disabled hidden style="display:none" value="default" required="required"></option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
  </select>
  <input type="submit" value="Send" />
</form>

<form>
  <input type="text" name="email" required="required">
  <input type="submit" value="Send" />
</form>

<button id="test">Alert</button>

【问题讨论】：

在第一个选项上设置value="" 而不是value="default" 并将required="true" 放在select 而不是option 上。然后您的代码应该可以正常工作
你知道如何验证输入字段和选择框并显示警报吗？

标签： javascript jquery html validation

【解决方案1】：

如果您想定位输入并选择下拉菜单，则必须添加 $.validator.addMethod。

$.validator.addMethod("validOrNah", function(value, element) {


  if ($("#username").val() === "" || $("#selectCatalog")[0].selectedIndex === 0) {
    return false;
  } 
    return true;

}, "Please enter in text and select dropdown");

$(this).validate({
  rules: {
    selectCatalog: {
      validOrNah: true
    }
  },

http://jsfiddle.net/ayang10/K6Tkn/129/

【讨论】：