如何爲jQuery創建自定義規則使用addClassRule驗證文本框的SUM？

Question

我已經在html中動態創建了textbox字段。我想爲所有文本框的SUM添加jquery驗證custome規則，必須使用AddClass爲100。但它不工作。如何使用addClass爲所有文本框字段的總和創建Jquery驗證custome規則。

波紋管截圖，

這裏是我的HTML代碼，

<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> 

我已經創建了jQuery驗證custome規則AddClass爲波紋管，

// 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;它會讓生活更輕鬆。 .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 
     } 
    } 
});