javascript - jqueryで複数選択検証を変更する

Question

これまでに得たもの: JSFIDDLE

私が欲しいのは：

<select>その行で選択されていない場合は、クラス「無効」を追加します
行の 3 つの選択が選択されている場合は、このクラスを削除します
1 行のすべて<select>のが選択されている場合は、フォームを送信します
1つだけが選択されている場合<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>

親切なアドバイス

score 0 · Accepted Answer

あなたは非常にあいまいな質問を投稿しました。たとえば、「無効な」クラスを追加/削除する必要があるイベントについては言及していません。これが「提出」だと思います。

また、4 つの条件を指定しましたが、#1、2、4 の条件は冗長であり、ある程度相互に排他的です。つまり、その行で選択されていない場合にクラス「無効」を追加すると、行の3つの選択が選択されている場合にこのクラスを削除する意味は何ですか? このクラスが選択されている場合は、単純に削除する必要があります。繰り返しますが、#4 の状態は本質的に #1 と同じです。

あなたのjsコードはうまく機能します.cssクラスを操作するために数行を追加するだけです.注：私は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');       
    });
});

score 0 · Accepted Answer

これは私が望んでいた解決策です。すべての助けに感謝します:

<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();
        }

      });
    });

javascript - jqueryで複数選択検証を変更する

2 に答える 2

Related

Reference