javascript - 使用 jquery 修改多选验证

Question

到目前为止我得到了什么：JSFIDDLE

我想要的是：

1. <select>如果未在其行中选择它，则添加类“无效”
2. 如果选择了该行中的 3 个选择，则删除此类
3. 如果<select>选择了一行中的所有 s 然后提交表单
4. 如果只<select>选择了一个，则将“无效”类添加到同一行中的其他 2 个选择中

这是 HTML，js 包含在上面的小提琴链接中：

 <form id="productOptions" name="product-options">
  <div class="selects s1">
    <select name="selectss1" id="size1" class="product-select-options-size">
      <option>-Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
      <option>X-large</option>
    </select>
    <select name="selectsc1" id="color1" class="product-select-options-color">
      <option>-Color</option>
      <option>Green</option>
      <option>Pink</option>
      <option>White</option>
      <option>Yellow</option>
    </select>
    <select name="selectsq1" id="qty1" class="product-select-options-qty">
      <option>-QTY</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
  <div class="selects s2">
    <select name="selectss2" id="size2" class="product-select-options-size">
      <option>-Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
      <option>X-large</option>
    </select>
    <select name="selectsc2" id="color2" class="product-select-options-color">
      <option>-Color</option>
      <option>Green</option>
      <option>Pink</option>
      <option>White</option>
      <option>Yellow</option>
    </select>
    <select name="selectsq2" id="qty2" class="product-select-options-qty">
      <option>-QTY</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
  <div class="selects s3">
    <select name="selectss3" id="size3" class="product-select-options-size">
      <option>-Size</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
      <option>X-large</option>
    </select>
    <select name="selectsc3" id="color3" class="product-select-options-color">
      <option>-Color</option>
      <option>Green</option>
      <option>Pink</option>
      <option>White</option>
      <option>Yellow</option>
    </select>
    <select name="selectsq3" id="qty3" class="product-select-options-qty">
      <option>-QTY</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </div>
  <p><a href="#" class="add-more">+ Add more at one time</a></p>
  <!-- End select options -->
  <input type="image" name="product-options" src="/media/blackheart/images/blackheart/add-to-cart.png"  />
  </form>

好心提醒

Answer 1

这是我想要的解决方案，感谢所有帮助：

<script type="text/javascript">
    $(function(){
        $('#formid').on('submit', function(e){
            e.preventDefault();
            var f=$(this);    
            var invalid=false, selected=0;
            $('.selects').each(function(){
                var row=$(this);
                var items=0;
                $('select', row).each(function(){
                    var t=$(this);
                    var selectedIndex=t.prop("selectedIndex");
                    if(selectedIndex)
                    {
                        items++;
                        t.removeClass('invalid'); //this line was added
                    }
                    else t.addClass('invalid');
                    $("#formid").find(".invalid").removeClass("invalid").filter(':lt(1)').addClass("invalid");
                        //this line was added
                });
                if(items==3) selected++;
                if(items>0 && items<3) invalid=true;
                items=0;
            });

        if(selected>0 && !invalid) f[0].submit();
        else {
        /*alert('Please fill up the form correctly');*/
        $(".selects-msg").slideDown();
        }

      });
    });

Answer 2

您发布了一个非常晦涩的问题。例如，您没有说明必须添加/删除什么事件“无效”类。我想这是“提交”。

您还提供了 4 个条件，而 #1、2、4 是多余的，因为它们在某种程度上是互斥的。即，如果您为未在其行中选择的类添加“无效”类，那么如果选择了该行中的 3 个选择，则删除该类有什么意义？如果它被选中，你必须简单地删除它。同样，#4 条件本质上与#1 相同。

您的 js 代码运行良好，您只需要添加几行来操作 css-classes 注意：我没有使用 jsfiddle，我在真实浏览器（包括 IE7）中检查了此代码并且它有效，而在 jsfiddle 没有。

$(function(){
    $('#frm_productOrder').on('submit', function(e){
        e.preventDefault();
        var f=$(this);    
        var invalid=false, selected=0;
        $('.selects').each(function(){
            var row=$(this);
            var items=0;
            $('select', row).each(function(){
                var t=$(this);
                var selectedIndex=t.prop("selectedIndex");
                if(selectedIndex)
                {
                    items++;
                    t.removeClass('invalid'); //this line was added
                }
                else t.addClass('invalid');    //this line was added
            });
            if(items==3) selected++;
            if(items>0 && items<3) invalid=true;
            items=0;
        });
        if(selected>0 && !invalid) f[0].submit();
        else alert('Please fill up the form correctly');       
    });
});