JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form id="form2">
    Adults:
    <input type="text" name="adults" />
    <br/> Children:
    <input type="text" name="children" />
    <br/> Total Attendees:
    <input type="text" name="attendees" />
    <br/>
    <input type="submit" />
</form>
<a href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

a {
    display: block;
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function() {

    $.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)");

    $("#form2").validate({
        errorElement: "span",
        rules: {
            attendees: {
                totalCheck: ['adults', 'children']
            },
            adults: {
                required: true,
                digits: true
            },
            children: {
                required: true,
                digits: true
            }
        },
        messages: {
            adults: "Enter number of adults",
            children: "Enter number of childern"
        },
        submitHandler: function(form) { // for demo
            alert('valid form');
            return false;
        }
    });

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

});