jquery unobtrusive validation 为部分加载的控件添加验证规则多次

Question

根据从下拉列表中选择的值，我有一个部分加载到弹出窗口中，多次。部分有一个需要验证的文本框。所以问题是验证只适用于第一个部分的文本框。关于另一个（在这种情况下）它说它是有效的。我创建了一个虚拟应用程序来在这里展示它。这是部分内容：

@Html.TextBoxFor(m => m.OrderedQuantity, new { name="somename", data_mini = "true", type = "number", @class = "orderedQuantity removeGroupsRequired" })

这是在我加载部分的弹出窗口中：

 $.ajax({
        url: '@Url.Action("LoadSpecialOffersByOfferGroup", "Orders")',
        type: 'POST',
        data: JSON.stringify(),
        dataType: 'json',
        contentType: 'application/json',
        success: function (data) {
            $('#groupOfferSection').show();
            $.each(data, function (val, partial) {
                $('#specialOrderGroupDetailSection').append(partial);
                var form = $("#mydiv form")
                            .removeData("validator")
                            .removeData("unobtrusiveValidation");

                $('#specialOrderGroupDetailSection').trigger('create');
                $.validator.unobtrusive.parse(form);

            });

            $("#mydiv form .orderedQuantity").each(function() {
                $(this).rules("add", {
                    required: true,
                    messages: {
                        required: "you must provide a quantity!"
                    }
                });
            });


        }
    });
 $('#load').click(function () {
    $("#mydiv form").validate().resetForm();

    $("#mydiv form").data("validator").settings.ignore = ".removeRequired";
    ValidateGroups();

    var form1valid = $("#mydiv form").valid();
    if (form1valid) {

        $.mobile.hidePageLoadingMsg();
        $('#closeOrderItemAddPopup').click();
    }
});
function ValidateGroups() {

    $("#mydiv form").validate();

    if ($("#mydiv form").valid()) {
        alert("valid");
    } else {
        alert("invalid");
    }
}

以及用于加载部分的控制器部分：

public ActionResult LoadSpecialOffersByOfferGroup()
    {
        List<string> partials = new List<string>();
        IList<SpecialOfferGroupDetailBO> specialOfferGroupDetailBos = new List<SpecialOfferGroupDetailBO>
                                                                          {
                                                                              new SpecialOfferGroupDetailBO
                                                                                  {ItemID = 123}
                                                                          };
        SpecialOfferGroupDetailVM vm = new SpecialOfferGroupDetailVM();
        vm.SpecialOfferGroupID = 1;
        vm.SpecialOfferGroupName = "group 1";
        vm.SpecialOfferGroupDetailBos = specialOfferGroupDetailBos;
        string specialOfferGroupDetailView = RenderRazorViewToString("SpecialOfferGroupDetail", vm);
        partials.Add(specialOfferGroupDetailView);
        IList<SpecialOfferGroupDetailBO> specialOfferGroupDetailBos1 = new List<SpecialOfferGroupDetailBO>
                                                                          {
                                                                              new SpecialOfferGroupDetailBO
                                                                                  {ItemID = 125}
                                                                          };
        SpecialOfferGroupDetailVM vm1 = new SpecialOfferGroupDetailVM();
        vm1.SpecialOfferGroupID = 2;
        vm1.SpecialOfferGroupName = "group 2";
        vm1.SpecialOfferGroupDetailBos = specialOfferGroupDetailBos1;
        string specialOfferGroupDetailView1 = RenderRazorViewToString("SpecialOfferGroupDetail", vm1);
        partials.Add(specialOfferGroupDetailView1);
        JsonResult jsonResult = Json(partials);
        return jsonResult;
    }

Answer 1

您的代码仅在您的 ValidateGroups 函数中调用 .validate()：

function ValidateGroups() {

    $("#mydiv form").validate();

    ....

关于这个插件要记住的最重要的一点是.validate() 不是一个测试 方法。这只是表单上初始化插件的方法。最常见的情况是，在 DOM 准备好或页面加载时完成一次。它只执行一次，任何后续调用都将被忽略。

$(document).ready(function() {

    $("#mydiv form").validate();  // initialize validation plugin on DOM ready event

    ....

由于您似乎正在尝试对动态创建的表单初始化验证，因此您将在创建或加载表单后立即调用 .validate()。

$.ajax({
    // create/load your form
    ....
});

$("#mydiv form").validate();  // initialize validation plugin after form is created/loaded

....