嘗試添加ajax post函數時MVC3驗證失敗

Question

我在驗證時使用jquery將表單數據發佈到控制器時遇到了一些麻煩。

此代碼的工作原理和驗證發生很好，如果我不使用jQuery的發佈。

<div id="window"> 
@using (Html.RequiredFieldsMessage()){} 
@using (Html.BeginForm("","",FormMethod.Post,new{id="card-payment"})) 
{ 
    @Html.ValidationSummary(true, "Please fix the errors below.") 
    <div class="inputForm no-border"> 
     <div class="fr"> 
      @Html.LabelFor(model => model.DpsPaymentModel.CardHolderName) 
      @Html.EditorFor(model => model.DpsPaymentModel.CardHolderName) 
      @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.CardHolderName, false) 
      </div> 
     <div class="fr"> 
      @Html.LabelFor(model => model.DpsPaymentModel.CardNumber) 
      @Html.EditorFor(model => model.DpsPaymentModel.CardNumber) 
      @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.CardNumber, false) 
     </div> 
     <div class="fr"> 
      @Html.LabelFor(model => model.DpsPaymentModel.DateExpiry) 
      @Html.EditorFor(model => model.DpsPaymentModel.DateExpiry) 
      @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.DateExpiry, false) 
     </div> 
     <div class="fr"> 
      @Html.LabelFor(model => model.DpsPaymentModel.Cvc2) 
      @Html.EditorFor(model => model.DpsPaymentModel.Cvc2) 
      @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.Cvc2, false) 
     </div> 
     <div class="fr"> 
      @Html.LabelFor(model => model.DpsPaymentModel.Amount) 
      @Html.EditorFor(model => model.DpsPaymentModel.Amount) 
      @Html.ValidationStyledMessageFor(model => model.DpsPaymentModel.Amount, false) 
     </div> 
     <div class="fr"> 
      <button type="submit" id="process-payment">Submit</button> 
     </div> 
    </div> 

} 
</div> 

如果我將此添加到我的視圖。驗證總是返回爲真。我的html不是以相同的視圖加載正確的jQuery驗證腳本的部分視圖。

$("#process-payment").click(function() { 
      event.preventDefault(); 
      var form = $("#card-payment"); 
      $.validator.unobtrusive.parse(form); 
      if (form.validate()) { 
       console.log("valid"); 
       $.ajax({ 
        url: '/payment/processcardpayment', 
        type: "POST", 
        data: form.serialize(), 
        success: function (data) { 
         console.log(data); 

        }, 
        error: function (jqXhr, textStatus, errorThrown) { 
         alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')"); 
        }, 
        complete: function() { 
         //  $("#ProgressDialog").dialog("close"); 
        } 
       }); 
      } else { 
       console.log("invalid"); 
      } 

     }); 

Answer 1

要調用在點擊處理event.preventDefault();但有定義的任何地方，所以我想你會得到一個錯誤javascipt的不event變量。你有沒有看過你的javascript調試工具的控制檯？

也許你的意思是你的點擊處理程序以此爲論據：

$("#process-payment").click(function (evt) { 
    evt.preventDefault(); 
    ... 
}); 

但其實我建議你訂閱的形式，而不是一個提交按鈕的點擊處理程序的提交事件。例如，當用戶在某個輸入字段內按下回車鍵提交表單而不是按下提交按鈕時，就會出現這種情況。

也是一個正確的方法來驗證一個表單有效的form.valid()而不是form.validate()在你的榜樣，除了你不需要調用$.validator.unobtrusive.parse除非你是在說一種新的形式，用於更新DOM例如一個AJAX調用。在這種情況下，您應該在成功回調中調用這個函數，以便用新的表單元素替換DOM，以解析新的不顯眼的驗證規則。

所以：

$('#card-payment').submit(function(evt) { 
    evt.preventDefault(); 
    var form = $(this); 
    if (form.valid()) { 
     $.ajax({ 
      url: this.action, 
      type: this.method, 
      data: form.serialize(), 
      success: function (result) { 
       console.log(result); 
      }, 
      error: function (jqXhr, textStatus, errorThrown) { 
       alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')"); 
      }, 
      complete: function() { 
       // $("#ProgressDialog").dialog("close"); 
      } 
     }); 
    } else { 
     console.log("invalid"); 
    } 
});