使用 jQuery Validate 插件验证三个文本字段

Question

我有三个要填写数字的文本字段。这三个文本字段的总和应始终为 100。我使用 jQuery Validation 插件来简化事情，并使用.addmethod() 来验证这个案例。

我试过的：http://jsfiddle.net/NcW9V/

-- 下面发布的代码是 jsfiddle 中的内容的副本-- 我的 jQuery 代码：

//show the percentage
        $("#airPercent, #seaPercent, #landPercent").change(function(){
            var sPerct = $('#seaPercent').val();
            var lPerct = $('#landPercent').val();
            var perct = $('#airPercent').val();
            var newTotal = parseInt(perct) + parseInt(lPerct) + parseInt(sPerct);
            $("#totalP").empty();
            $("#totalP").text(newTotal);
        });

//the validator     
jQuery.validator.addMethod("checkModePerct", function(value) {
        total = parseInt($('#airPercent').val()) + parseInt($('#seaPercent').val()) + parseInt($('#landPercent').val());
        return total == 100;
        }, "Please only enter a sum total of 100%");

$("#contact-form").validate(
    {
    });

HTML 标记：

<form action="lane" method="post" id="contact-form" class="form-horizontal">

        <legend>Mode of Transportation:</legend>
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Air</th>
                            <th>Sea</th>
                            <th>Land</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Percentage</td>
                            <td class="span3">
                                <input type="text" class="span1" name="airPercent" id="airPercent" value="0" class="required  checkModePerct"/>%
                            </td>
                            <td class="span3">
                                <input type="text" class="span1" name="seaPercent" id="seaPercent" value="0" class="required  checkModePerct"/>%
                            </td>
                            <td class="span3">                          
                                <input type="text" class="span1" name="landPercent" id="landPercent" value="0" class="required  checkModePerct"/>%      
                            </td>
                            <td class="span3">
                                <div id="totalP">
                                    0
                                </div>%
                            </td>
                        </tr>
                    </tbody>
         </table>
        <input type="submit" value="submit"/>
</form>

我已经查看了许多其他示例，但我能找到的最接近的示例是 http://jsfiddle.net/wtmv3/。我玩过代码，但无法让它工作，因为我不确定jQuery.validator.classRuleSettings.checkTotal 做了什么。似乎也没有任何关于它的信息。

Answer 1

您发布了三个不同版本的代码，一个在 OP 中，两个在 jsFiddles 中。我选择了最接近你描述的那个......

“我有三个文本字段要填写数字。这三个文本字段的总和应始终为 100。我正在使用 jQuery 验证插件...”

工作代码：http://jsfiddle.net/K3S5S/

$(document).ready(function () {

    //percentage  // I made no changes to your '.change()' handler
    $("#airPercent, #seaPercent, #landPercent").change(function () {
        var sPerct = $('#seaPercent').val();
        var lPerct = $('#landPercent').val();
        var perct = $('#airPercent').val();
        var newTotal = parseInt(perct) + parseInt(lPerct) + parseInt(sPerct);
        $("#totalP").empty();
        $("#totalP").text(newTotal);
    });

    jQuery.validator.addMethod("checkTotal", function (value) {
        // if you need to check total of three fields, then add up all three!
        total = parseFloat($('#airPercent').val()) + parseFloat($('#seaPercent').val()) + parseFloat($('#landPercent').val());
        return total == 100;  // returns true/false if total is 100 or not
    }, "Total must add up to 100%!");

    $("#contact-form").validate({
        rules: {  // declare your rule based on field "name"
            airPercent: {
                required: true,
                checkTotal: true
            },
            seaPercent: {
                required: true,
                checkTotal: true
            },
            landPercent: {
                required: true,
                checkTotal: true
            }
        },
        groups: {  // combine all three messages into one
            percent: "airPercent seaPercent landPercent"
        },
        errorPlacement: function (error, element) {
             // place the message after the total
             error.insertAfter(  $('#totalP') );  
        }
    });

});

• 您不需要classRuleSettings，我什至不确定它当前是否是有效方法。引用：“似乎也没有任何关于它的信息。” ~ 这应该是一个危险信号，它可能不是一个有效的选项或方法。当声明为class 时，似乎只是简单地说自定义规则为true，但是通过在字段class 中使用任何自定义规则，您将规则声明为true。换句话说，它要么什么都不做，要么是多余的......删除它。

• 您必须在所有三个字段中声明您的自定义规则checkTotal。我已经在.validate() 方法中声明了所有规则。如果需要，您可以将它们移动到字段类中......任何一种方式都是有效的。

• 我使用groups 选项将所有错误消息合并为一个。

• 我使用errorPlacement 回调将错误消息放置在更合乎逻辑的位置，就在总计字段旁边。根据需要进行调整。

• 我没有在您的代码中看到任何错误，只是缺少实现。参考文档：http://jqueryvalidation.org

Answer 2

http://jsfiddle.net/UR4sX/

你会注意到几件事：

1. if(sPerct > 0 && lPerct > 0 && perct > 0){ - 这样验证只会在所有 3 个框都填满时触发 - 否则会很烦人

2. if(newtotal !== 100) 部分 - 目前它只显示通过或失败 - 如果在此处无效，您需要添加代码以阻止它触发。

       $("#airPercent, #seaPercent, #landPercent").change(function(){
       var sPerct = $('#seaPercent').val();
       var lPerct = $('#landPercent').val();
       var perct = $('#airPercent').val();
   
       var newTotal = parseInt(perct) + parseInt(lPerct) + parseInt(sPerct);
   
       if(sPerct > 0 && lPerct  > 0 && perct > 0){
           if (newTotal !== 100){
               $('#valid').html("Please enter amounts totalling 100");
           }else{
               $('#valid').html("pass");
           }
   
   
       }
   
   
       $("#totalP").empty();
       $("#totalP").text(newTotal);
   });