JQuery проверять несколько полей

У меня есть 3 поля ввода, которые запрашивают количество людей, и сколько из них взрослых и сколько детей. Я пытаюсь использовать плагин проверки JQuery, чтобы добавить пользовательский метод, где дети + взрослые = количество людей

Это мой проверочный звонок

$("#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"                
    }               
});

Я посмотрел на групповую функцию и .addMethod() плагина validate, но, похоже, он был создан только с учетом одного элемента. Есть идеи?

Ответ 1

Следуйте документации для создания собственного метода/правила. Здесь я просто называю это 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)");

Это реализовано так же, как и любое другое правило. Эти два параметра являются 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"
    }
});

Рабочая ДЕМО: http://jsfiddle.net/hBXL6/

РЕДАКТИРОВАТЬ:

Добавлен обработчик keyup focusout для повторной проверки attendees при изменении других полей. Это те же два обработчика событий по умолчанию, которые используются плагином.

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

Новая рабочая ДЕМО: http://jsfiddle.net/ua0534dv/2/

Ответ 2

Ответ Спарки не является полным: adults и children должны повторно проверять attendees при изменении.

Добавьте это в конце:

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

Ответ 3

Как указано в комментариях, это не очень хорошая практика. Тем не менее, если вы все еще хотите это сделать:

$("#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"                
    }               
});