javascript - MVC4 客户端验证和 ajax

Question

答案:

下面提供的 OK 答案，由 @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 时，它有点“跳过”验证，submitHandler 和 showErrors 都没有被命中...

如何在 ajax 调用之前验证我的表单？

致以诚挚的问候。

编辑1:

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

但它仍然不起作用，submitHandler 和 showErrors 都没有被命中。

Answer 1

如果您使用ajax加载表单，则需要再次解析表单:

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