Question

我遇到jQuery Validation Plugin的问题。我使用ASP.NET MVC和Entity Framework。该项目有很多图书馆，很难理解问题并找到答案。我有一个表格，其中有字段的部分。我使用验证插件来验证客户端字段。该部分是可折叠的，可以打开和关闭。内部部分我有打开模态窗口的按钮。在窗口内我可以搜索使用Ajax的数据。用户可以手动添加信息，可以添加使用Ajax的信息，字段可以为空。第一项任务是为隐藏字段添加验证。我在$（document）.ready中添加了setDefault for validator。

 com.google.gson.stream.MalformedJsonException: Use JsonReader.setLenient(true) to accept malformed JSON at line 1 column 2 path $

当我为验证器添加设置忽略时，一切都可以正常使用隐藏字段和打开字段但是在显示模态窗口验证器插件后不起作用。在FireBug中我收到错误：TypeError：验证器未定义（两次）。我打开并关闭模态窗口（没有Ajax搜索），我接受此错误，验证器不起作用。

这是模态窗口代码：

 jQuery.validator.defaults.ignore = "";

我在这个文件中添加了带有Ajax代码的Bundels：

@using (modal.BeginBody()){
<div class="row">
    <div class="col-lg-offset-3 col-lg-6" id="search-entry-form">
        @using (var form = Html.Bootstrap().Begin(new Form().HtmlAttributes(new { onsubmit = "return false" })))
        {
            @form.FormGroup().TextBoxFor(model => model.EANCode).Label();
            @form.FormGroup().TextBoxFor(model => model.Name).Label();
            @form.FormGroup().TextBoxFor(model => model.InternationalName).Label();
            @Html.Bootstrap().Div(Html.Bootstrap().SubmitButton().Text("Wyszukaj").Id("search-specific").Style(ButtonStyle.Success).
           ButtonBlock().PrependIcon("glyphicon glyphicon-search")).Class("col-lg-5 col-lg-offset-7");
        }
    </div>
</div>
<div class="col-lg-12 top30" id="result-table"></div>}@using (modal.BeginFooter()){@Html.Bootstrap().Button().Text("Zamknij").Data(new { dismiss = "modal" }).Style(ButtonStyle.Primary)}

这是Ajax代码：

@Scripts.Render("~/bundles/specificNutSearch")

这是需要验证的字段代码：

$(document).ready(function () {

function pagination() {
    $('#result-table').each(Utils.Pagination);
}


function getData(id) {
    $.ajax({
        url: "GetSpecific",
        dataType: "json",
        method: "POST",
        cache: false,
        data: {
            id: id
        },
    }).success(function (result) {
        if (result === null) return;
        for (var propName in result) {
            $(".panel [Name$='." + propName + "']").val(result[propName]);
        }
        clear();
    });
}

function clear() {
    $("#result-table").html("");
    $(".modal input").val("");
    $(".pager").remove();
}

function search() {
    var form = $("#search-entry-form :input").serialize();

    $.ajax({
        url: $('#search-entry-form form').attr('action'),
        dataType: "html",
        method: "POST",
        cache: false,
        data: form

    }).success(function (result) {
        $("#result-table").html(result);
        $(".select-specific").on("click", function () { getData($(this).data("specific")) });
        pagination();
    });
}

$("#search-specific").on("click", search);});

在 chhtml 视图中，我在底部文件中添加了模态窗口：

     Html.Bootstrap().Div(
                                          Html.Bootstrap().Label("").LabelText("4.").Class("pull-left"),
                                          Html.Bootstrap().FormGroup().TextBoxFor(model => model.EAN).Label()).Class("col-lg-6")

是ViewModel字段：

<div class="modal fade" id="specificNutritionalPurposeSearch" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">

    </div>
</div>

还发现了一件非常奇怪的事情： 当我注释掉所有specificNutSearch（@ Scripts.Render（“〜/ bundles / specificNutSearch”））代码时，插件不起作用。但是当我注释掉 @ Scripts.Render（“〜/ bundles / specificNutSearch”）时一行，插件有效。

可能是什么问题？也许这是jQuery和Validator插件版本不兼容的问题？

修改

这是打开模型窗口的按钮代码：

 [Display(Name = "Kod EAN")]
    [RegularExpression("[0-9]{13}",ErrorMessage = "Kod EAN powinien zawierać 13 znaków")]
    public string EAN { get; set; }

这是Controller中的ActionResult：

@Html.Bootstrap().Button().Text("Wyszukaj środek spożywczy").TriggerModal("specificNutritionalPurposeSearch").HtmlAttributes(new { href = Url.Action("SearchSpecificNutritionalPurpose") }).Style(ButtonStyle.Success).ButtonBlock().PrependIcon("glyphicon glyphicon-search")

在动作模型中为空，因为模态窗口具有搜索数据的按钮。

这是用于搜索数据的模态窗口中的搜索按钮的ActionResult：

 [HttpGet]
    public ActionResult SearchSpecificNutritionalPurpose()
    {
        var model = new SpecificNutritionalPurposeSearchViewModel();
        return PartialView("Modals/_SpecificNutritionalPurposeDictionarySearch", model);
    }

方法 FindSpecificNutritionalPurpose 从dataBase（EF）获取数据

Answer 1

我认为当specyficNutSearch脚本改变DOM时，验证处理程序将被删除。

我的解决方案是更改clear方法，以便刷新验证处理程序：

function clear() {
    $("#result-table").html("");
    $(".modal input").val("");
    $(".pager").remove();

    //add this
    var $form = $("#search-entry-form form");
    $form.removeData("validator").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($form);
}

显示模态窗口后jQuery验证插件不起作用

1 个答案: