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

时间:2013-09-11 07:23:10

标签: jquery asp.net-mvc jquery-validate unobtrusive-validation

我有一部分是我加载一个弹出窗口,具体取决于从下拉列表中选择的值多次。 partial有一个需要验证的文本框。所以问题是验证仅适用于第一个部分的文本框。关于另一个(在这种情况下),它说它是有效的。我已经创建了一个虚拟应用程序来显示它。这部分是:

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

1 个答案:

答案 0 :(得分:0)

您的代码只会在.validate()函数中调用ValidateGroups

function ValidateGroups() {

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

    ....

关于此插件,最重要的一点是.validate()不是测试方法。它只是在表单上初始化插件的方法。最典型的是,这在DOM ready或页面加载上完成 一次 。它只执行一次,任何后续调用都会被忽略。

$(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

....