MVC4客户端验证和Ajax

下面提供的，由@ www.innovacall.com确定的答案是正确的，我只是不看它的权利在第一时间，现在它完美，谢谢。

原题：

我尝试了一些解决方案，但没有为我工作。

在我的项目，我有这样一个模式弹出（我用的自举）：

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

问题：

标准@ 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调用之前验证我的表单？

此致敬礼。

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

但仍无法正常工作，既不submitHandler也不showErrors正在热播。

来源

2014-02-11 user2384366

如果您加载使用Ajax表单，您需要重新解析您的形式：

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

来源

2014-02-11 14:20:50

请看看我的编辑。 – user2384366

MVC4客户端验证和Ajax

回答

相关问题