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

jquery jquery-validate

348 观看

1回复

270 作者的声誉

我已经在html中动态创建了文本框字段。我想使用AddClass为所有文本框的SUM添加jquery验证自定义规则,必须为100。但是它不起作用。如何使用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",
       }

        }
})
作者: alka vaghela 的来源 发布者: 2017 年 9 月 15 日

回应 1


1

85096 作者的声誉

请阅读文档 ; 它将使生活更轻松。 .addClassRules()仅接受key:value成对列表,用于将现有规则组合为单个“复合”规则,该规则可使用类名应用于您的字段。它不接受功能或错误消息。

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

如果你想使用的功能来创建自己的自定义规则,那么你可以使用.addMethod()方法

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
         }
    }
});
作者: Sparky 发布者: 2017 年 9 月 15 日
32x32