jquery - jquery 验证下拉菜单不起作用

Question

当我尝试验证下拉菜单时，我无法使用验证插件。在 chrome 中，我收到一条警告消息，上面写着：“没有选择，无法验证，什么都不返回”

$('#wpuf_form').validate({
    debug: true,
    rules: {

        "category[]" : {
            required:{
                depends: function(element){
                    return $('.cat').val() == '-1';
                    }
                }
            }
    },

    submitHandler: function(form){
        alert('test');
    }
 });

 <!-- this the html -->
 <form id="wpuf_form" name="wpuf_form" action=""  method="POST">
 <select name="category[]" id="cat" class="cat">
 <option value="-1">– Select –&lt;/option>
 <option class="level-0" value="1">test</option>
 <option class="level-0" value="2">test2</option>
 <option class="level-0" value="3">test3</option>
 </select>
 <input type="submit" name="wpuf_new_post_submit" value="Submit Creation">                        
 </form>

任何帮助将不胜感激。提前致谢！

Answer 1

我刚刚解决了我的问题，只是验证插件不喜欢 value == '-1'，我不得不将其更改为 value == ''，我希望我能知道为什么......因为我使用的是 wordpress 功能为此，我使用 javascript 将默认值更改为 cat.options[cat.selectedIndex].value = '';

Answer 2

确保在加载页面并且 #wpuf_form 元素存在后添加验证代码。为此，请确保它包含在 $('document').ready() 语句中；

$('document').ready(function(){

    $('#wpuf_form').validate({
        debug: true,
        rules: {

            "category[]" : {
                required:{
                    depends: function(element){
                        return $('.cat').val() == '-1';
                        }
                    }
                }
        },

        submitHandler: function(form){
            alert('test');
        }
     });
}