0

ここにこのマークアップがあり、ユーザーがサイズを選択したかどうかを確認する簡単なチェックを追加したいと考えています。jQuery 検証プラグインを使用していますが、これを行う最善の方法がわかりません。カスタム CMS の一部であるため、マークアップを変更できません。

        <form class="product-details">  
        <select class="w80 valid" id="mysize" required="required" title="Please select size!" name="mysize">
           <option value="11071">Select Size</option>
           <option value="11079">S</option>
           <option value="11080">M</option>
           <option value="11081">L</option>
           <option value="11082">XL</option>
           <option value="11089">XXL</option>
        </select>
        ...
        <button type="submit">Add</button>
        </form>

バニラのjQueryでは、ロジックは次のようになります。

        ( function($) {

           $(function (){  
               $('.product-details').submit(function(){
                 var mySize = $('#mysize');
                 var firstOption = mySize.find('option').first().val();
                 var userOption = mySize.find(':selected').val();
                 if( firstOption === userOption ) {
                    // fail
                    return false;
                    // trigger some error.
                 }
               });
           }); 

        } ) ( jQuery );

では、jQuery 検証を使用して同様のことを行う方法について説明します。

4

1 に答える 1

1

試す

$(function(){
    jQuery.validator.addMethod( 'notequals', function(value, element, param){
        return value != param;
    } , 'Please select a valid value')

    $('.product-details').validate({
        rules: {
            mysize: {
                notequals: $('#mysize').find('option').first().val()
            }
        }
    });
});

デモ:プランカー

于 2013-06-07T03:17:46.913 に答える