在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