logo标签列表

如何在MVC中使用chosen.js实现客户端验证

jqueryasp.net-mvc-3jquery-chosenclient-side-validation
3
我正在使用 chosen.js 实现多项选择，结合 asp.net mvc3。但客户端验证在此多选控件上不起作用。
我是这样实现的，使用 Html.Dropdownlist 帮助程序，一旦 dom 从 JavaScript 载入，就使用 $("#dropdown1").chosen()。
它会将 Select 替换为 div。
以下是代码： 回调代码： 
function (data) {
            $("#divnewdata").html(data);

            $("#ddlcode1").chosen({
                disable_search_threshold: 10,
                no_results_text: "Oops, nothing found!",
                disable_search: false,
            });

            $("#ddlCode1_chosen").find('.chosen-choices').removeClass('form-control').addClass('form-control');

            $("#ddlcode2").chosen({
                disable_search_threshold: 10,
                no_results_text: "Oops, nothing found!",
                disable_search: false,
            });

            $("#ddlcode2_chosen").find('.chosen-choices').removeClass('form-control').addClass('form-control');

            $.validator.setDefaults({
                ignore: []
            });

        }

从布局页面加载Java脚本

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script>

            $('form').validate({
                ignore: []
            });
    </script>
    <script src="~/Scripts/Common/Common.js"></script>
</head>

我正在尝试下载部分视图

<script>
    $(document).ready(function () {
        $.validator.unobtrusive.parse("#formAddcodes");

        $.validator.setDefaults({
            ignore: []
        });
    });
</script>

<link href="~/Content/chosen.css" rel="stylesheet" />
<script src="~/Scripts/chosen.jquery.min.js"></script>
<script src="~/Scripts/Codes/Codes.js"></script>


@using (Html.BeginForm("AddCodes", "Codes", FormMethod.Post, new { id = "formAddcodes" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group">
            @Html.LabelFor(model => model.code1, htmlAttributes: new { @class = "col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.code1, Model.Code1List as SelectList, new { @class = "form-control", id = "ddlcode1", multiple = "multiple" })
                @Html.ValidationMessageFor(model => model.code1, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.code2, htmlAttributes: new { @class = "col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(m => m.code2, Model.code2List as SelectList, new { @class = "form-control", id = "ddlcode2", multiple = "multiple" })
                @Html.ValidationMessageFor(model => model.code2, "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Add" class="btn btn-primary" />
            </div>
        </div>
    </div>
}
1个回答
3

chosen通过将原始的<select>元素隐藏来更新html，默认情况下，隐藏元素将被忽略。您可以使用以下脚本修改此行为。

$.validator.setDefaults({ 
    ignore: []
});

或者

$('form').validate({
    ignore: []
});
好的，抱歉没有表述清楚。在我的ajax回调中，我将内容添加到dom后重新解析了上面的代码。在这里，我再次执行 $('form').validate({ ignore: [] });。 - Badrinarayana
如果仍然不起作用，请编辑您的问题以显示您尝试过的实际代码。但首先将 $（“#dropdown1”）.chosen（）行注释掉，并确保它与标准下拉列表一起工作。 - user3559349
首先，从部分视图中删除所有脚本（永远不要将脚本放在部分视图中），并将它们移动到主视图或布局中。您仍然没有在成功回调中添加 form.data('validator', null); $.validator.unobtrusive.parse(form); （紧接着 $.validator.setDefaults({ 行之前）。 - user3559349
@user007，你能否分享最终可用的代码，特别是JavaScript的顺序和添加$.validator.unobtrusive.parse(form)的位置等。我一直在努力解决这个问题，但还没有成功。 - Zafar
@z，如果您的代码有问题，请在此网站上提出问题，展示相关代码并说明您的问题。 - user3559349
显示剩余6条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接