MVC4客戶端驗證和Ajax

Question

答：

下面提供的，由@ 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正在熱播。

Answer 1

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

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