使用jQuery UI SelectMenu插件主题的选择列表上的jQuery验证

Question

这是另一个问题的后续行动;首先，我需要在正常的选择列表上进行验证。 （第一部分可用here）

我有一个选择菜单，上面有一些jQuery验证逻辑。我正在使用ASP.NET MVC，因此有一些自定义属性 - 但是现在我只想让验证工作，所以属性并不重要。

我设法让它工作（实际上，Gajotres解决了它，而不是我。）

现在我想将它扩展到jQuery UI selectmenu插件（插件仍然是非官方的 - 将在下一版jQuery UI中正式发布，但您可以在这里找到它：jQuery UI Select Menu (Unofficial)

我设法让样式工作，但现在验证再次失败。我发布了我的代码，这里是一个小提琴。请注意，此处发布的代码不仅仅是为了简洁起见。

jsFiddle (with Plugin)

jsFiddle (without Plugin [properly working])

---

预期行为

当“默认”选项是选择菜单中当前选定的值时，用户必须无法提交表单。

---

以下是所有相关文件的链接，以防您因某些原因不想尝试小提琴。

的jQuery

• http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css
• http://code.jquery.com/ui/1.9.2/jquery-ui.js

jQuery验证插件

• http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js

选择菜单（分叉）

• http://ciel.github.com/jquery-ui/javascripts/jquery.ui.selectmenu.js
• http://ciel.github.com/jquery-ui/stylesheets/selectmenu.css

的Javascript

$(document).ready(function() { 

    $.validator.addMethod("valueNotEquals", function(value, element, arg){
        return arg != value;
    }, "");

    $("#form1").validate({
        rules: {
            select_list : {valueNotEquals: $('#select_list').attr('data-val-mustbe-propertyvalue')},  
        },
        messages: {  
            select_list : { valueNotEquals: $('#select_list').attr('data-val-required') }
        },        
        submitHandler: function(form) {
            alert($('#form1').valid());
            form.submit();
        }
    });

    $("#select_list").selectmenu();
});​

HTML

<form id="form1" action="">
    <select id="select_list" name="select_list">
            <option value="default">Choose...</option>
            <option value="1">1</option>
            <option value="2">2</option>
    </select>
    <input type="submit" id="submit" value="Submit" />
</form>​

CSS

        body {
            font-size: 62.5%;
            font-family: "Verdana",sans-serif;
        }

        fieldset {
            border: 0;
        }

        label, select, .ui-select-menu {
            float: left;
            margin-right: 10px;
        }

        select {
            width: 200px;
        }

        .wrap ul.ui-selectmenu-menu-popup li a {
            font-weight: bold;
}

选择菜单主题的附加CSS可在selectmenu.css文件中找到，可在此处获取

• http://ciel.github.com/jquery-ui/stylesheets/selectmenu.css

Answer 1

您可以将这段代码添加到jQuery：

//set the submit button disabled
$('input[type="submit"]').attr('disabled','disabled');

//trigger a check of the value when the selectbox is changed
$('#select_list').change(function(){
    if($(this).val() != 'default'){
       $('input[type="submit"]').removeAttr('disabled');
    }
});

Answer 2

我知道您的新实施有什么问题。我自己也遇到了同样的问题。

验证插件无法使用css display：none验证元素。为了使这个插件工作，原始选择必须隐藏在自定义的下方。

这是我为证明这一点而做的一个例子：

http://jsfiddle.net/Gajotres/64aKZ/

你应该评论/取消注释这个css集团以区别：

    #select_list {
         display: block !important;
    }

现在我可以看到这个插件没有被创建来覆盖旧的选择框（无论原始显示是块还是没有）。如果你不介意看看我正在起诉的插件。它将覆盖旧的选择框，即使其显示设置为阻止：

http://jamielottering.github.com/DropKick/

编辑：

还有另一种解决方案。你需要玩css。将其设置为选择框：

    #select_list {
         display: block !important;
         visibility: hidden;
    }

现在你需要用新的选择框覆盖旧的选择框，或者至少浮动左边的新选择框。