在AJAX提交之前使用jQuery進行多個下拉選擇驗證

Question

我遇到了驗證我的表單的問題。我有超過6個不同的下拉選擇對象。以下是前兩個作爲例子：

<table id="ProjectTable"> 
<tr><td> 
<select​​​​​​​​​​​​​​ ​​​id="selected1" selectedIndex=0> 
    <option></option> 
    <option>o1</option> 
    <option>o2</option> 
    <option>o3</option> 
    <option>o4</option> 
</select> 
</td> 
<td> 
<select id="selected2" selectedIndex=0> 
    <option></option> 
    <option>10</option> 
    <option>12</option> 
    <option>13</option> 
    <option>14</option> 
</select> 
</td></tr></table> 
​<button type="button">Submit</button>​​​​​​​​​​​​​​​​​​​​​​​​​ 

我想這樣做是爲了驗證下拉選項，如果用戶選擇空選項（默認爲第一個選項），並點擊提交。然後它會得到錯誤，並通知用戶他們必須在每個下拉選擇中選擇一個選項。六個下拉選擇ID是動態生成的。我知道我可以使用jQuery .each（）函數循環選擇元素。

任何人都可以幫助我嗎？由於

Answer 1

// filter over empty selects 
// function will jQuery object 
function checkEmptySelect() { 
    return $('select').filter(function() { 
     // return those selects, with no value selected 
     return !this.value.trim(); 
    }); 
} 

// bind change event to select box 
$('select[id^=selected]').on('change', function() { 
    // keep reference of returned jQuery object 
    var unselect = checkEmptySelect(); 
    // checking is any non-selected select box exists 
    if (unselect.length) { 
     unselect.addClass('error'); // if exists then add error class 
    } else { // if no non-selected found 
     $('select[id^=selected]').removeClass('error'); // remove error class 
    } 
})​; 

DEMO

Answer 2

見DEMO

$('#form').submit(function() { 
    var valid = true; 

    $('select', this).each(function (e) { 
     if (!$(this).val()) valid = false; 
    }); 

    if (!valid) { 
     $('.error').show(); 
     return false; 
    } 
});​ 

Answer 3

在這裏，我已經做了上述驗證問題完全完事。

演示：http://codebins.com/bin/4ldqp94

HTML：

<form id="frm1"> 
    <div class="error"> 
    </div> 
    <table id="ProjectTable"> 
    <tr> 
     <td> 
     <select id="selected1" selectedIndex=0> 
      <option> 
      </option> 
      <option> 
      O1 
      </option> 
      <option> 
      O2 
      </option> 
      <option> 
      O3 
      </option> 
      <option> 
      O4 
      </option> 
     </select> 
     </td> 
     <td> 
     <select id="selected2" selectedIndex=0> 
      <option> 
      </option> 
      <option> 
      10 
      </option> 
      <option> 
      12 
      </option> 
      <option> 
      13 
      </option> 
      <option> 
      14 
      </option> 
     </select> 
     </td> 
     <td> 
     <select id="selected3" selectedIndex=0> 
      <option> 
      </option> 
      <option> 
      opt1 
      </option> 
      <option> 
      opt2 
      </option> 
      <option> 
      opt3 
      </option> 
      <option> 
      opt4 
      </option> 
     </select> 

     </td> 
    </tr> 
    </table> 
    <button type="submit"> 
    Submit 
    </button> 
</form> 

的jQuery：

$(function() { 
    $("form#frm1").submit(function() { 
     var isValid = true; 
     $("select").each(function() { 
      $(".error").html(); 
      if ($(this).val() == "") { 
       $(".error").html("Please selct value for empty dropdown..!"); 
       isValid = false; 
      } 
     }); 
     return isValid; 
    }); 
}); 

CSS：

.error{ 
    color:#f81122; 
    padding:5px; 
} 

演示：http://codebins.com/bin/4ldqp94