MVC4客戶端驗證和ajax

Question

回答：

下面提供的確定答案，@ www.innovacall.com是正確的，我只是第一次沒有正確閱讀，現在它完美無缺，謝謝。

原始問題：

我嘗試了一些解決方案，但沒有一個適合我。

在我的項目中，我得到了一個這樣的模態彈出窗口（我使用bootstrap）：

<!-- Modal -->
<div class="modal fade" id="skillAnswerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">@ViewBag.AddressTimeTableMapModalEditHeaderTitle</h4>
      </div>
      <div class="modal-body">
        <div id="addSkillAnswerModal">
            @Html.Partial("_AddSkillAnswer", Model.TempSkillAnswer)
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">@ViewBag.CloseButtonLabel</button>
        <button type="button" class="btn btn-primary" id="btnAddSkillAnswerModal" >@ViewBag.SaveChangesButtonLabel</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我使用以下ajax從該彈出窗口提交數據：

$("#btnAddSkillAnswerModal").click(function () {
    $.ajax({
        url: addSkillUrl,
        type: "POST",
        cache: false,
        async: true,
        traditional: true,
        data: $("#addSkillAnswerModal :input").serialize(),
        dataType: "json",

        success: function (result) {
            $("#skillAnswerModal").modal('toggle');
            $("#addSkillAnswerModal input[type!=hidden]").val('');
            $("#IsAnswerVisible").val("true");

            oTable.fnReloadAjax();
        }
    });
});

問題：

在我的模態彈出窗口中呈現的View中的標准@ Html.ValidationSummary（）幫助器未被調用 - 因此我沒有客戶端驗證。 我知道@ Html.ValidationSummary（）僅在我使用@ Html.BeginForm（...）時才有效，但如何在提交之前驗證我的ajax？ 我試過這樣的事情：

$("#btnAddSkillAnswerModal").click(function () {
    $("#AddSkillAnswerForm").validate({
        debug: true,
        submitHandler: function (form) {
            $.ajax({
                url: addSkillUrl,
                type: "POST",
                cache: false,
                async: true,
                traditional: true,
                data: $("#addSkillAnswerModal :input").serialize(),
                dataType: "json",

                success: function (result) {
                    $("#skillAnswerModal").modal('toggle');
                    $("#addSkillAnswerModal input[type!=hidden]").val('');
                    $("#IsAnswerVisible").val("true");

                    oTable.fnReloadAjax();
                }
            });
        },

        showErrors: function (errorMap, errorList) {
            $("#summary").html("Your form contains "
            + this.numberOfInvalids()
            + " errors, see details below.");
            this.defaultShowErrors();
        }
    });
});

但是它不起作用，那就是：沒有錯誤，但是當我調試JS時，它會“跳過”驗證，但是commitHandler和showErrors都沒有被擊中......

如何在ajax調用之前驗證我的表單？

最好的祝福。

EDIT1：

@ www.innovacall.com：

我試過這種方法，但由於某些原因它仍然無法工作......

我的_AddSkillAnswer部分看起來像這樣：

@model HostessServiceApplication.WebUI.Models.Admin.AgencyAnimatorSkillAnswerListAddSkillAnswer

@using HostessServiceApplication.Common.Localizer
@using HostessServiceApplication.WebUI.Resources
@using HostessServiceApplication.WebUI.Resources.Admin

@{
    Layout = null;

    //GlobalResources:
    var globalLocalizer = new UniversalTextLocalizer(typeof(TranslationStrings));
    ViewBag.SaveChangesButtonLabel = globalLocalizer.GetTranslatedVariable("SaveChangesButtonLabel");

    var viewSpecificLocalizer = new UniversalTextLocalizer(typeof(AddSkillAnswer));

    ViewBag.Title = viewSpecificLocalizer.GetTranslatedVariable("AddSkillAnswerPageTitle");
}

<h2>@ViewBag.Title</h2>

@using (Html.BeginForm("AddSkillAnswer", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" ,id="AddSkillAnswerForm"}))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary()

    @Html.EditorForModel("Admin/AgencyAnimatorSkillAnswerListAddSkillAnswer")
}

我嘗試了以下組合：

$("#btnAddSkillAnswerModal").click(function () {
    var form = $("#AddSkillAnswerForm");

    $.validator.unobtrusive.parse(form);
    //form.validate();
    form.validate({
        debug: true,
        submitHandler: function (form) {
            $.ajax({
                url: addSkillUrl,
                type: "POST",
                cache: false,
                async: true,
                traditional: true,
                data: $("#addSkillAnswerModal :input").serialize(),
                dataType: "json",

                success: function (result) {
                    $("#skillAnswerModal").modal('toggle');
                    $("#addSkillAnswerModal input[type!=hidden]").val('');
                    $("#IsAnswerVisible").val("true");

                    oTable.fnReloadAjax();
                }
            });
        },

        showErrors: function (errorMap, errorList) {
            $("#summary").html("Your form contains "
    + this.numberOfInvalids()
    + " errors, see details below.");
            this.defaultShowErrors();
        }
    });
});

和這個：

$("#btnAddSkillAnswerModal").click(function () {
    var form = $("#AddSkillAnswerForm")
    .removeData("validator") /* added by the raw jquery.validate plugin */
    .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin */

    $.validator.unobtrusive.parse(form);
    form.validate({
        debug: true,
        submitHandler: function (form) {
            $.ajax({
                url: addSkillUrl,
                type: "POST",
                cache: false,
                async: true,
                traditional: true,
                data: $("#addSkillAnswerModal :input").serialize(),
                dataType: "json",

                success: function (result) {
                    $("#skillAnswerModal").modal('toggle');
                    $("#addSkillAnswerModal input[type!=hidden]").val('');
                    $("#IsAnswerVisible").val("true");

                    oTable.fnReloadAjax();
                }
            });
        },

        showErrors: function (errorMap, errorList) {
            $("#summary").html("Your form contains "
    + this.numberOfInvalids()
    + " errors, see details below.");
            this.defaultShowErrors();
        }
    });
});

但它仍然無法正常工作，提交者和showErrors都沒有被擊中。

Answer 1

如果您使用ajax加載表單，則需要再次解析表單：

$.validator.unobtrusive.parse(form);
form.validate();
if (form.valid()) {
    form.submit();
}