jQuery 跨多个字段验证

jQuery validate across multiple fields

提问by Faiyet

I have 3 input fields that ask for the number of people, and of them how many are adults and how many are children. I am trying to use jQuery validate plugin to add a custom method where children + adults = number of people

我有 3 个输入字段，要求输入人数，其中有多少是成人，有多少是儿童。我正在尝试使用 jQuery 验证插件添加一个自定义方法，其中儿童 + 成人 = 人数

This is my validation call

这是我的验证电话

$("#form2").validate({
    errorElement: "span",
        rules: {
        attendees: {
             required: true,
             digits: true
        },              
        adults: {
             required: true,
             digits: true
        },              
        children: {
             required: true,
             digits: true
        }
    },
    messages: {
        attendees: "Enter the number of persons (including yourself)", 
        adults: "Enter number of adults", 
        children: "Enter number of childern"                
    }               
});

I looked at the group feature and .addMethod()method of the validate plugin but it seems that it was crafted only with one element in mind. Any ideas?

我查看.addMethod()了验证插件的组功能和方法，但它似乎只考虑了一个元素。有任何想法吗？

回答by Sparky

Follow the documentationfor creating a custom method/rule. Here, I simply call it totalCheck, but you can name it anything you wish.

按照文档创建自定义方法/规则。在这里，我简单地称它为totalCheck，但您可以随意命名它。

$.validator.addMethod('totalCheck', function(value, element, params) {
    var field_1 = $('input[name="' + params[0] + '"]').val(),
        field_2 = $('input[name="' + params[1] + '"]').val();
    return parseInt(value) === parseInt(field_1) + parseInt(field_2);
}, "Enter the number of persons (including yourself)");

It's implemented just like any other rule. The two parameters are the nameattributes of the two other fields you want to check against. Since this new rule says the field must contain the sum of the two other fields, the requiredand digitsrules are now redundant and can be removed.

它的实施就像任何其他规则一样。这两个参数是name您要检查的另外两个字段的属性。由于这条新规则规定该字段必须包含其他两个字段的总和，因此required和digits规则现在是多余的，可以删除。

$("#form2").validate({
    errorElement: "span",
    rules: {
        attendees: {
            totalCheck: ['adults', 'children'] // <-- your custom rule
        },
        adults: {
            required: true,
            digits: true
        },
        children: {
            required: true,
            digits: true
        }
    },
    messages: {
        adults: "Enter number of adults",
        children: "Enter number of childern"
    }
});

Working DEMO: http://jsfiddle.net/hBXL6/

工作演示：http: //jsfiddle.net/hBXL6/

---

---

EDIT:

编辑：

Added a keyup focusouthandler to re-validate attendeeswhenever other fields are changed. These are the same two default event handlers used by the plugin.

添加了一个keyup focusout处理程序以attendees在其他字段更改时重新验证。这些与插件使用的两个默认事件处理程序相同。

$('input[name="adults"], input[name="children"]').on('keyup focusout', function() {
    $('input[name="attendees"]').valid();
});

New working DEMO: http://jsfiddle.net/ua0534dv/2/

新的工作演示：http: //jsfiddle.net/ua0534dv/2/

回答by leobard

The answer by Sparky is not complete: the adultsand childrenneed to re-validate attendeeswhen changed.

的：由Sparky的答案是不完整的adults，并children需要重新验证attendees时改变。

Append this at the end:

最后附上这个：

$('input[name=adults],input[name=children]').on('change', function(){
  $('input[name=attendees]').removeData("previousValue").valid();
});

回答by Neeraj

As suggested in comments this is not a good practice. Nonetheless, if you still want to do it:

正如评论中所建议的，这不是一个好习惯。尽管如此，如果您仍然想这样做：

$("#form2").validate({
    errorElement: "span",
        rules: {
        attendees: {
             equal: $("#form2 #adults").val() + $("#form2 #children").val();
        },              
        adults: {
             required: true,
             digits: true
        },              
        children: {
             required: true,
             digits: true
        }
    },
    messages: {
        attendees: "Enter the number of persons (including yourself)", 
        adults: "Enter number of adults", 
        children: "Enter number of childern"                
    }               
});