jQuery验证不能在partialview中工作？

Question

我不知道我在做什么错。 但是jQuery验证在partialview中不起作用。

让我解释一下我做了什么

我正在从父级加载局部视图（ 这不是ajax加载 ）

父级

 <div id="EmailInformationBlock" class="profileSection">
    <div class="sectionTitle">
        <span>Email</span>
    </div>
    <div id="DivEmailContainer" style="display:block">
        @Html.Partial("_DisplayEmail", Model)
    </div>
    <hr />
</div>

部分视图

@using (Html.BeginForm(null, null, FormMethod.Get, new { name = "frmEmail", id = "frmEmail" }))
{

    <td>@Html.Label("Email Location", new { @class = "control-label" })</td>
            <td>                  
              @Html.DropDownListFor(model => model.CommunicationLocation,
                        Enumerable.Empty<SelectListItem>(),"Select                 ",
                                   new { @class = "input-validation-error form-control",
                                   @name="CommunicationLocationEmail" }
                        )

                }
          </td>
    }

<script type="text/javascript">

    $(function () {

    $.validator.addMethod("selectNone",
            function (value, element) {
                return this.optional(element) || element.selectedIndex != 0;
            },
           "Please select an option."
        );
    $("#frmEmail").validate({
        rules: {
            CommunicationLocation: {
                selectNone: true
            }

        },
        messages: {
            CommunicationLocation: {
                selectNone: "This field is required"
            }
        },
        submitHandler: function (form) {
            ('#frmEmail').submit(function () {
                $.ajax({
                    url: 'customer/PostEditEmail',
                    type: 'Post',
                    data: $(this).serialize(),
                    success: function (result) {
                        // $('#DivEmailContainer').html(result);
                    }
                });
            });
        }
    });


        $.ajax({
            url: "customer/GetCommunicationLocationList",
            type: 'GET',
            dataType:"json",
            success: function(d) {
                // states is your JSON array
                var data = d.Data;
                // alert(JSON.stringify(d.Data));
                $.each(data, function (i) {
                    if (data[i].Description != "Bulk Dues"){
                        var optionhtml = '<option value="' +
                            data[i].Code + '">' + data[i].Description + '</option>';
                        $("#CommunicationLocation").append(optionhtml);
                    }

                });
            },
            error: function (xhr) { alert("Something seems Wrong"); }
        });
    });


</script>

我提交表单后，将重定向到新的URL。 它不应转到任何网址。

我在这里做错了什么。

Answer 1

您有有效ajax内submit内submit ...

submitHandler: function (form) {
    ('#frmEmail').submit(function () {
        $.ajax({
                ....
        });
    });
}

您忘记了('#frmEmail')选择器前面的$ ，它破坏了submitHandler内的submitHandler ，但这实际上并不是这里的核心问题。

我提交表单后，将重定向到新的URL。

当您已经在插件的submitHandler函数内部时，无需将.ajax()放在.submit()处理函数中。 这就是submitHandler选项的重点 ……以替换表单的默认submit处理程序。

这就是您所需要的...

submitHandler: function (form) {
    $.ajax({
        url: 'customer/PostEditEmail',
        type: 'Post',
        data: $(form).serialize(),
        success: function (result) {
            // $('#DivEmailContainer').html(result);
        }
    });
    return false;
}

还要注意， $(this).serialize被$(form).serialize()替换，因为this在submitHandler上下文内是没有意义的。 form参数已由开发人员传递到此函数中，以表示form对象。

---

如果您使用的是unobtrusive-validation插件，则您无法自己调用.validate()因为unobtrusive已经为您处理了它。 换句话说，jQuery Validate插件仅在第一次调用.validate()方法时注意，因此，如果您的实例是后续实例，则它将与您的选项一起被忽略。

Answer 2

我可能是错的，但是jquery似乎不知道该局部视图具有任何验证，因为它是从父视图加载的。 通过将以下内容添加到局部视图中来尝试重新解析DOM

$(function(){
   jQuery.validator.unobtrusive.parse();
   jQuery.validator.unobtrusive.parse("#frmEmail");
});

这给你父母的看法

$(function(){
   $("#submitButtonId").click(function(){
   if (!$("#frmEmail").valid()){
      return false;
   }
});
});