【问题标题】:Custom Validation for Jquery UI SelectableJquery UI Selectable 的自定义验证
【发布时间】:2012-08-14 15:50:04
【问题描述】:

我有以下代码使

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">

【问题讨论】:

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


    【解决方案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 制作您的选择器

    【讨论】:

    • 请查看我输入的更新代码。很抱歉没有在帖子前面包含它。
    • 您是否在问如何使用插件 jquery-validator 做同样的事情?我从未使用过它,但似乎只是在您的 isOneSelected 方法中设置它并在提交时调用它。手动验证表单很容易,特别是如果您开始使用 jQuery UI 小部件,如果您不在其他任何地方使用它,我建议您保持代码无插件。
    • 是的,我正在尝试使用 jquery-validator 插件。
    • @jmogera 看看大家都在说什么,你只需要在 isOneSelected 验证方法中 return $("#someId@(index) .ui-selected").length == 1
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-02-04
    • 1970-01-01
    • 2013-03-02
    • 1970-01-01
    • 2014-12-24
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多