ajax 게시 함수를 추가 할 때 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> 

내보기에 이것을 추가하면. 유효성 검사는 항상 true로 반환됩니다. 내 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 변수가 없습니다. 그런데 자바 스크립트 디버깅 도구의 콘솔을 보셨습니까?

은 아마 당신은 인수로이 걸릴 당신의 클릭 핸들러 의미 :

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

을하지만 실제로 양식 대신 제출 버튼의 클릭 핸들러의 제출 이벤트에 가입 권하고 싶습니다. 예를 들어, 제출 버튼을 누르는 대신 양식을 제출하기 위해 입력 필드 내부에서 Enter 키를 누른 경우를 고려합니다. 형태가 유효한지 확인하기 위해 또한

올바른 방법은 form.valid()하지 form.validate() 당신의 예에서와 같이, 즉뿐만 아니라 당신은 당신이 말에 새로운 양식으로 DOM을 업데이트하지 않는 $.validator.unobtrusive.parse를 호출 할 필요는 없다 예 : AJAX 호출. 이 경우 새로운 중재 유효성 검사 규칙을 구문 분석하기 위해 DOM을 새 양식 요소로 바꾸면 success 콜백 내부에서이를 호출해야합니다.

그래서 :

$('#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"); 
    } 
});