jQuery에 대한 사용자 정의 규칙을 만드는 방법 addClassRule을 사용하여 텍스트 상자의 합계를 확인 하시겠습니까?

Question

html로 동적으로 텍스트 상자 필드를 만들었습니다. jQuery 유효성 검사를 추가하고 싶습니다. 모든 텍스트 상자의 SUM에 대해 AddClass를 사용하여 100을 입력해야합니다. 그러나 그것은 작동하지 않습니다. 모든 텍스트 상자 필드의 합계에 대해 addClass를 사용하여 Jquery 유효성 검사 사용자 정의 규칙을 만드는 방법.

울부 짖는 소리가 나는 울부 짖는 소리로 AddClass에 대한 JQuery와 유효성 검사 손님 규칙을 만든

<div class="kyc-tab-form-wrap"> 
          <h2 class="kyc-tab-form-heading">Geographic Information</h2> 

          <div class="geographic-info-wrap"> 
           <span class="red text-center">(*) Please mention your business % against below geographies</span> 

           <ul class="geographic-subheading"> 
            <li>Business Description</li> 
            <li>Business %</li> 
           </ul> 
           <div class="geographic-content"> 

            @for (int i = 0; i < (ViewBag.GeoLocation).Count; i = i + 2) 
            { 
            <div class="geographic-row"> 
             <div class="w175"> 
              <label>@ViewBag.GeoLocation[i].Text</label> 
             </div> 
             <div class="w65"> 
              <input type="text" name="LocationID_@ViewBag.GeoLocation[i].Value" data-value="@ViewBag.GeoLocation[i].Value" placeholder="0.00%" class="geoBussinessPer"> 
             </div> 

             <div class="w175"> 
              <label>@ViewBag.GeoLocation[i + 1].Text</label> 
             </div> 
             <div class="w65"> 
              <input type="text" name="LocationID_@ViewBag.GeoLocation[i+1].Value" data-value="@ViewBag.GeoLocation[i+1].Value" placeholder="0.00%" class="geoBussinessPer"> 
             </div> 
            </div> 

            } 
            <div class="geographic-row"> 
             <div class="w175"> 
              <label>Total</label> 
             </div> 
             <div class="w65"> 
              <input type="text" id="txtGeoBussinessTotal" class="GeoBussinessTotal" name="geoBussinessPerTotal" readonly="readonly"> 
             </div> 
             @*<span id="ErrorGeoTotal" style="color: rgb(185, 74, 72); font-size: 12px; display:none">Total must be 100.</span>*@ 
            </div> 
           </div> 
          </div> 
         </div> 

,

// custom validate method for echking the sum boxes amounts 
$.validator.addClassRules("geoBussinessPer", function (value, element) { 

    return !$(element).hasClass('invalid'); 
}, "Total must be 100"); 


// set the change event of each input 
$('.geoBussinessPer').blur(function() { 

    var boxes = $('.geoBussinessPer'), 
     total = 0; 

    $(boxes).each(function() { 
     total += !isNaN(parseInt(this.value)) ? parseInt(this.value) : 0; 
    }); 

    $(".GeoBussinessTotal").val(total); 

    // is it more than 100 ? 
    if (total == 100) { 
     boxes.addClass('invalid'); 
    } else { 
     boxes.removeClass('invalid'); 
     boxes.removeClass('error'); 
    } 
}); 


$("#kycFormReg").validate({ 
     rules: { 

      geoBussinessPer: { 
      required:true, 
      number: true 
     }, 
     messages: { 
       geoBussinessPer:"Total must be 100", 
     } 

     } 
}) 

Answer 1

Please read the documentation, 여기

내 HTML 코드, 스크린 샷입니다 삶이 편해질 것입니다. .addClassRules()은 key:value 쌍의 목록 만 허용하며 기존 규칙을 클래스 이름을 사용하여 필드에 적용 할 수있는 단일 "복합"규칙으로 결합하는 데 사용됩니다. 함수 또는 오류 메시지를 허용하지 않습니다. 이 기능을 사용하여 자신 만의 규칙을 만들려면

jQuery.validator.addClassRules("className", { 
    required: true, 
    minlength: 2 
}); 

, 당신은 the .addMethod() method을 사용합니다.

jQuery.validator.addMethod("geoBussinessPer", function(value, element) { 
    return !$(element).hasClass('invalid'); 
}, "Total must be 100"); 

이 맞춤식 규칙은 분야에서 수업을 찾고 있지만 매우 이상하게 보입니다. 대신이 함수는 사용자의 입력을 평가해야합니다.

---

는 또한 rules 객체를 사용하여 규칙을 선언하는 방법에 대한 약간의 혼동이 될 것으로 보인다. 필드 이름이 누락되어 messages 개체가 rules 개체 안에 들어 가지 않습니다.

$("#kycFormReg").validate({ 
     rules: { 
      geoBussinessPer: { 
      required:true, 
      number: true 
     }, 
     messages: { 
       geoBussinessPer:"Total must be 100", 
     } 

     } 
}) 

는

$("#kycFormReg").validate({ 
    rules: { 
     myField: { // <- NAME of your field 
      // list all rules for myField here 
      geoBussinessPer: true, // <- name of your custom method 
      required:true, 
      number: true 
     } 
    }, 
    messages: { // <- SIBLING of rules object 
     myField: { // <- NAME of your field 
      // custom messages for myField listed here. 
      // geoBussinessPer: "Total must be 100" // message not needed since same is already defined elsewhere 
     } 
    } 
});