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