以jQuery UI SelectMenu插件为主题的选择列表上的jQuery验证 [英] jQuery Validation on Select List themed with jQuery UI SelectMenu Plugin

问题描述

这是另一个问题的跟进；首先，我需要使验证工作在常规选择列表上. (第一部分在此处可用)

This is a followup to another question; First I needed to get the validation working on a normal select list. (The first part is available here)

我有一个选择菜单，上面有一些jQuery验证逻辑.我正在使用ASP.NET MVC，因此有一些自定义属性-但是现在我只希望验证有效，因此这些属性并不重要.

I have a select menu that has some jQuery Validation logic on it. I am using ASP.NET MVC, so there are some custom attributes - but right now I just want the validation to work, so the attributes are not important.

我设法使它起作用(实际上，Gajotres解决了它，而不是我.)

I managed to get that to work (actually, Gajotres solved it, not me.)

现在，我想将其扩展到jQuery UI selectmenu插件中(该插件仍然是非官方的-计划在下一版jQuery UI中正式发布，但是您可以在这里找到它:

Now I want to extend it into the jQuery UI selectmenu plug (plugin is still unofficial - slated for official release in the next version of jQuery UI, but you can find it here : jQuery UI Select Menu (Unofficial)

我设法使样式生效，但是现在验证再次失败.我正在发布代码，并在这里摆弄小提琴.请注意，为简洁起见，这里发布的代码不止这些.

I have managed to get the styling to work, but now validation fails again. I am posting my code, and a fiddle here. Please note there is more than the code posted here, just for brevity.

当默认"选项是选择菜单中当前选择的值时，用户不能提交表单.

The user must not be able to submit the form while the "Default" option is the currently selected value in the select menu.

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

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

• 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

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

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

在selectmenu.css文件中可以找到主题选择菜单的其他CSS，可在此处

​Additional CSS to theme the select menu is found in the selectmenu.css file, available here

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

推荐答案

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

I know what is a problem with your new implementation. I got the same problem myself.

Validate插件无法使用CSS显示验证元素:无.为了使该插件正常工作，原始选择必须隐藏在自定义插件的下方.

Validate plugin can not validate elements with css display: none. And for this plugin to work original select must be hidden below the custom one.

这是我为演示此示例:

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

您应该对此CSS批注发表评论/取消评论，以确保与众不同:

You should comment/uncomment this css bloc to se the difference:

    #select_list {
         display: block !important;
    }

现在，从我可以看到的结果来看，此插件并未创建为覆盖旧的选择框(无论原始显示是块显示还是无显示).如果您不介意的话，请参阅我正在起诉的插件.即使其显示设置为阻止，它也将覆盖旧的选择框:

Now from what I could see this plugin was not created to cover the old select box (no matter if original display was block or none). If you don't mind take a look at a plugin I am suing. It will cover old select box even if its display is set to block:

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

EDIT :

还有另一种解决方案.您将需要使用CSS.将其设置为选择框:

There's another solution. You will need to play with css. Set this to select box:

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

现在，您需要用新的选择框覆盖旧的选择框，或者至少将新的选择框浮动到左侧.

Now you will need to cover old select box with new one, or at least float new one to the left.

这篇关于以jQuery UI SelectMenu插件为主题的选择列表上的jQuery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！