javascript - 如何验证 jquery-validation 中的选择框？

Question

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

我的 fiddle :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>

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