0

这是对另一个问题的跟进；首先，我需要在正常的选择列表上进行验证。（第一部分可在此处获得）

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

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

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

我已经设法使样式正常工作，但现在验证再次失败。我正在发布我的代码，并在这里提琴。请注意，为了简洁起见，这里发布的代码不止于此。

jsFiddle（带插件）

jsFiddle（没有插件[正常工作]）

预期行为

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

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

jQuery

jQuery 验证插件

选择菜单（分叉）

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

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

4

2 回答 2

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');
    }
});
于 2012-12-29T21:35:35.133 回答
1

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

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

这是我为证明这一点而制作的一个示例：

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

您应该评论/取消评论这个 css bloc 来确定差异：

    #select_list {
         display: block !important;
    }

现在从我所见，这个插件不是为了覆盖旧的选择框而创建的（无论原始显示是块还是没有）。如果你不介意看看我正在起诉的插件。即使它的显示设置为阻止，它也会覆盖旧的选择框：

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

编辑 ：

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

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

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

于 2012-12-29T21:55:39.913 回答