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

【问题标题】：How to implement client side validation in MVC with chosen.js如何使用 selected.js 在 MVC 中实现客户端验证
【发布时间】：2015-05-17 09:08:52
【问题描述】：

我使用chosen.js 进行多项选择，使用asp.net mvc3 实现。客户端验证无法使用此多选控件。

我的实现方式是，使用Html.Dropdownlist helper 并从 JavaScript $("#dropdown1").chosen() 加载 dom。

它正在用 div 替换 Select。

下面是代码

回调代码

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

【问题讨论】：

标签： jquery asp.net-mvc-3 jquery-chosen client-side-validation

【解决方案1】：

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

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

或

$('form').validate({
    ignore: []
});

【讨论】：

那你没有做对。它需要在您加载 jquery 脚本但不在 document.ready 中之后进行，您使用的是哪个版本的 jquery？如果是旧版本，您可能需要使用ignore: ""
Jquery 版本是 1.10.2。我正在我的布局页面中加载 jquery 脚本。而使用选择控件的地方是局部视图之一，通过ajax调用加载。
除非您重新解析验证器，否则不会验证动态控件。在成功回调中，您还需要在将元素附加到附加插件的 DOM 后添加以下代码 - form.data('validator', null); $.validator.unobtrusive.parse(form);（您应该将该信息放在您的问题中！）
好吧抱歉没有说清楚。在我的 ajax 回调中，将内容附加到 dom 后，也用上面的代码重新解析表单。这里也再次在做 $('form').validate({ ignore: [] });
如果仍然无法正常工作，请编辑您的问题以显示您尝试过的实际代码。但首先注释掉 $("#dropdown1").chosen() 行并确保它与标准下拉列表一起使用