如何使用jQuery验证表单中的下拉菜单？

user3623883 发表于 Dev

用户名

我已经从Treehouse和CodeSchool之类的工具中学到了大部分jQuery，因此其中一些内容可能看起来很熟悉。

我正在尝试在提交按钮变为活动之前验证表单中的下拉菜单。但是，每当我进行选择并输入内容时，“提交”按钮都不会激活。

这是我现在拥有的示例：

function containsBlanks() {
  var blanks = $('.required').map(function() {
    return $(this).val() === "";
  });
  return $.inArray(true, blanks) != -1;
}

function FilledIn() {
  if (containsBlanks()) {
    $('#submit_btn').attr('disabled', 'disabled');
  } else {
    $('#submit_btn').removeAttr('disabled');
  }
}
FilledIn();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<form id="basic_form">
  <select name="lighterColors" id="lighterColors" class="required">
    <option value="">--Select--</option>
    <option value="Blue">Blue</option>
    <option value="Red">Red</option>
  </select>

  <br>

  <label for="name"></label>
  <input type="text" id="name" class="required">
  <br>
  <input id="submit_btn" type="submit">
</form>

我已将“选择”选项的值更改为任何随机值，但仍未从Submit_btn中删除属性。请帮助任何建议。

韦斯利·史密斯

下面的插件可以这样称呼： $('.requiredSelects').validateSelects('#submit_btn');

哪里.requiredSelects是必须填写的所有元素的选择器，哪里是#submit_btn应该禁用的按钮的选择器，除非填写了所有字段。

(function ($) {
    $.fn.validateSelects = function (btn) {
        var elements = this;
        var invalid = 0;
        // make sure to return here so the pulgin is chainable
        return elements.change(function() { // bind to change event 
            invalid = 0;
            elements.each(function() {
                if ($(this).val() === "") invalid++;
            });
            invalid > 0 ? $(btn).attr('disabled', 'disabled') : $(btn).removeAttr('disabled');
        });
    };
}(jQuery));



$('.requiredSelects').validateSelects('#submit_btn');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<form id="basic_form">
    <select name="lighterColors" id="lighterColors" class="requiredSelects">
        <option value="">--Select--</option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
    </select>
    <select name="lighterColors" id="lighterColors" class="requiredSelects">
        <option value="">--Select--</option>
        <option value="Blue">Blue</option>
        <option value="Red">Red</option>
    </select>
    <br>
    <label for="name"></label>
    <input type="text" id="name" class="required" />
    <br>
    <input id="submit_btn" type="submit" disabled />
</form>