특정 필드가 아약스를 사용하여 업데이트 된 후 범위 유효성 검사를 수행하는 방법

Question

드롭 다운 선택에서 업데이트되는 총 필드 2 개와 총 수량보다 작거나 같아야하는 수량을 입력하는 필드가 있습니다. 드롭 다운 선택은 ajax 호출을 통해 데이터를 가져옵니다. DOM에서 동적으로 업데이트 된 값은 유효성 검사를 다시 구문 분석해야한다는 것을 알고 있습니다. 그러나 그것은 작동하지 않는 것 같습니다. 다른 모든 유효성 검사는 양식에서 정상적으로 작동합니다. 내가 SO1SO2 코드 언급 한 SO의 비슷한 질문이 시도 :

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal">  
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.PurchaseOrderID, "PurchaseOrderID", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-4"> 
       @Html.DropDownListFor(u => u.PurchaseOrderID, Model.PurchaseOrders, "--Select--") 
       @Html.ValidationMessageFor(model => model.PurchaseOrderID, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.POTotalQuantity, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-4"> 
       @Html.EditorFor(model => model.POTotalQuantity, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly" } }) 

      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Quantity, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-4"> 
       @Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { @class = "form-control", @type = "number", min = "1", max = Model.POTotalQuantity.ToString() } }) 
       @Html.ValidationMessageFor(model => model.Quantity, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(model => model.ExpectedDeliveryDate, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-3"> 
       @Html.EditorFor(model => model.ExpectedDeliveryDate, "{0:dd/mm/yyyy}", new { htmlAttributes = new { @class = "form-control datepicker" } }) 
       @Html.ValidationMessageFor(model => model.ExpectedDeliveryDate, "", new { @class = "text-danger" }) 
      </div> 
     </div> 


     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-primary" /> 
      </div> 
     </div> 
    </div> 
} 

컨트롤러 :

public JsonResult PopulatePODetails(int POID) 
    { 
     var purchaseOrder = db.PurchaseOrders.Find(POID); 

     var poTotalQty = db.PurchaseOrderLineItems.Where(p => p.PurchaseOrderID == purchaseOrder.ID).Sum(q => q.Quantity); 

     // Build an anonymous object 
     var data = new 
     { 
      POTotalQty = poTotalQty 

     }; 
     return Json(data, JsonRequestBehavior.AllowGet); 
    } 

JS :

$(document).ready(function() { 
//Populating PO quantity on PO selection 
    $('#PurchaseOrderID').change(function() { 

     if (($(this).val() == "") || ($(this).val() == "0")) { 
      //need to clear textbox values 
      $('#POTotalQuantity').val(''); 

     } 
     else { 
      var poId = $(this).val(); 

      var url = '@Url.Action("PopulatePODetails", "DeliverySchedules")'; 
      $.getJSON(url, { POID: poId }, function (response) { 
       $('#POTotalQuantity').val(response.POTotalQty); 
       $.validator.unobtrusive.parse($(response)); 
      }); 
     } 
    }); 


}); 

모델 :

public class DeliveryScheduleVM 
    { 
     public int ID { get; set; } 
//omitted other properties 
     public IEnumerable<SelectListItem> PurchaseOrders { get; set; } 
     [DisplayName("PO Total Qty")] 
     public int POTotalQuantity { get; set; }// this is used as the upper limit 
     [Required] 
     public int Quantity { get; set; } 
    } 

을

Answer 1

먼저 오해를 정리하십시오.

당신이 $.validator를 재분석

, 당신의 DOM을 구문 분석하고 폼 컨트롤의 data-val-* 속성을 읽을 수 jquery.validate.unobtrusive.js 지시 (당신의 재산 검증에 의해 속성 생성)과 jquery.validate.js에 규칙을 추가합니다. 이는 양식이 처음로드 될 때 이미 완료되었으며 수행하지 않는 새 양식 컨트롤 (예 : ajax를 통해)을 동적으로 추가 할 때만 필요합니다 ( Quantity에 대한 사용자 제어가 이미 있음). 어쨌든 json 객체가 아닌 <form> 요소를 구문 분석해야합니다. 올바른 사용법은 this answer을 참조하십시오.

둘째, min 및 max 속성은 HTML-5 유효성 검사 전용이며 jQuery 유효성 검사와 관련이 없습니다. 사실 그들은 함께 작동하지 않기 때문에 이 <form> 요소에 novalidate="novalidate" 속성을 추가하기 때문에 작동하지 않습니다. 당신이 클라이언트와 서버 측 유효성 검사에 필요한 무엇

는 IClientValidatable를 구현하는 조건 ValidationAttribute이며, 관련 스크립트는 Quantity의 값은 POTotalQuantity의 값과 비교 될 수 있도록. 자신의 조건부 유효성 검사 속성을 작성하는 좋은 지침은 The Complete Guide To Validation In ASP.NET MVC 3 - Part 2을 권장합니다. 귀하의 경우에 당신은 당신이 직접 작성하지 않으려면

[Required] 
[Bewteen(1, "POTotalQuantity")] 
public int Quantity { get; set; } 

또한 조건부 검증이 foolproof 플러그인에서 속성을 사용할 수 있습니다처럼 사용되는 속성을 작성할 수 있습니다.

패키지를 다운로드 (그리고보기에서 mvcfoolproof.unobtrusive.js 스크립트를 포함) 및

[Required] 
[Range(1, int.MaxValue)] // for minimum value 
[LessThanOrEqualTo("POTotalQuantity", ErrorMessage = "The quantity must be less than or equal to the value of POTotalQuantity")] 
public int Quantity { get; set; }