Jquery验证和选择框列表

时间:2012-05-07 18:37:56

标签: javascript jquery jquery-validate

如何针对下面的选择框列表具体要求和唯一条件?

<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
<select name="category[]" id="cat_1">
<option value="">Select One</option>
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>
<select name="category[]" id="cat_2">
<option value="">Select One</option>
<option value="5">ee</option>
<option value="6">ff</option>
<option value="7">gg</option>
<option value="8">hh</option>
</select>
<select name="category[]" id="cat_3">
<option value="">Select One</option>
<option value="9">ii</option>
<option value="10">jj</option>
<option value="11">kk</option>
<option value="12">ll</option>
</select>
<input class="submit" type="submit" value="Submit">
</form>

请注意,有多少猫没有固定,它可以超过3,

所以如何让每个选择框都需要它,

并且每个selectbox选择的值必须使用jquery validate插件是唯一的?谢谢

2 个答案:

答案 0 :(得分:3)

var $selects = $('form select[name^=category]'),
    values = [];

$(':submit').click(function(e) {
  e.preventDefault();
  values = [];
  $($selects).each(function() {
      if($(this).val()) {
          values.push($(this).val());        
      }
  });
    if(!values.length) {
        alert('Please select all categories');
        return false;
    }
  if(values.length < $selects.length || $.unique(values).length < $selects.length) {
    alert('Please select all categories and be unique');
    return false;
  }
});

DEMO

答案 1 :(得分:1)

这是一个很棒的jQuery验证插件,可以让您的生活更轻松:http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

这就是你需要做的全部:(插件完成剩下的工作)

<select id="sport" class="validate[required]" name="sport">
<option value="">--Select--</option>
<option value="option1">Tennis</option>
<option value="option2">Football</option>
<option value="option3">Golf</option>
</select>

希望有所帮助:)