Jquery UI的可选自定义验证

时间:2012-08-14 15:50:05

标签: jquery asp.net-mvc-3 jquery-ui jquery-validate

我有以下代码来构建

for(somecollection){
    <ol id="someId@(index)" class="selectableList">
       <li value="1">1</li>
       <li value="2">2</li>
       <li value="3">3</li>
    </ol>
}

在javascript部分:

$(".selectableList").selectable(
            {
                stop: function (event, ui) {
                    $(".ui-selected:first", this).each(function () {
                        $(this).siblings().removeClass("ui-selected");
                        var refreshVal = $(this).attr("value");
                        var cid = $(this).attr("id");
                        SetValue(@(Model.Id),refreshVal, cid);
                    });
                }
            }
        );

$("#positionCultureForm").on("submit", function () {
        if (!$(this).valid()) {
            return false;
        }
    });

我不确定如何为此设置验证,以便在提交表单时检查该项目的至少一个 ui-selected

编辑: 我需要对集​​合中的每个项目进行验证。

编辑: 自定义验证:

jQuery.validator.messages.required = "";

    $.validator.addMethod("isOneSelected", function (value, element, arg) {
        return false;
    }, 'test');


    $("#someForm").validate();

    $("#someForm").on("submit", function () {
        if (!$(this).valid()) {
            return false;
        }
    });

在Html中:

<ol id="someId@(index)" class="selectableList isOneSelected">

1 个答案:

答案 0 :(得分:1)

在申请.selectable()后,你的ol看起来与此类似:

<ol id="someId@(index)" class="selectableList ui-selectable">
<li class="ui-widget-content ui-selectee">Item 1</li>
<li class="ui-widget-content ui-selectee">Item 2</li>
<li class="ui-widget-content ui-selectee">Item 3</li>
<li class="ui-widget-content ui-selectee ui-selected">Item 4</li>
<li class="ui-widget-content ui-selectee">Item 5</li>
<li class="ui-widget-content ui-selectee">Item 6</li>
<li class="ui-widget-content ui-selectee">Item 7</li>
</ol>

从那里你可以看到出现了.ui-selected类,为了找出选择了多少,只需创建一个选择器并使用.length来获取它返回的项目数。

if($("#someId@(index) .ui-selected").length){} // if 1 or more are selected

如果您需要针对每个人做一些特别的事情,您可以随时循环使用它。

$("#someId@(index) .ui-selected").each(function()
{
    // your validation
}

在您的代码中,您似乎正在使用.removeClass("ui-selected");删除此类 然后,您可以简单$(this).addClass("foo")并使用.foo

制作您的选择器