Question

我在这里有这个标记，我希望添加一个简单的检查以查看用户是否有选择了一个尺寸。我正在使用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>

我知道在vanilla 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验证来做类似的事情。

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

演示：Plunker

jQuery Validation Plugin - 简单的实现

1 个答案: