如何在使用jQuery的表單中驗證下拉菜單？

Question

我已經從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的ATTR 。請幫助任何建議。

Answer 1

下面的插件可以這樣調用：$('.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>