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>

我提交表单后重定向到新网址。它不应该去任何网址。

enter image description here

我在这里做错了什么。

Answer 1

您在ajax内的submit内有效submit ...

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

您忘记了$选择器前面的('#frmEmail')，它会破坏submitHandler内的所有内容，但这不是真正的核心问题。

我提交表单后重定向到新网址。

当您已经在插件的.ajax()功能中时，您无需将.submit()置于submitHandler处理程序中。这是the submitHandler option ...的全部内容，以替换表单的默认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;
   }
});
});

jquery验证无法在局部视图中工作？

2 个答案: