Question

我已经在html中动态创建了文本框字段。我想添加jquery验证所有文本框的SUM的客户规则必须是100使用AddClass。但它不起作用。如何使用addClass为所有文本框字段的总和创建Jquery验证客户规则。

截图是截图，

这是我的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>

我已经为AddClass创建了jquery验证客户规则，如下所示，

  // 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对的列表，用于将现有规则合并为单个＆＃34;复合＆＃34;可以使用类名应用于您的字段的规则。它不接受函数或错误消息。

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
         }
    }
});

如何为jQuery创建自定义规则使用addClassRule验证文本框的SUM？

1 个答案: