FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Validating multiple inputs as one

In some cases, you need to validate a value which is combined by various fields. For instance, a Birthday field might be a combination of Date, Month and Year one.

This example show a way to deal with these cases. The following form requires all of Date, Month and Year fields. Also, the combination of them must be a valid date.

The approach is quite simple:

First, we need to create a hidden field that its value is generated from Date, Month and Year fields.

<input type="hidden" name="dob" />

By default, FormValidation will ignore the hidden field. In order to apply the notEmpty and date validators for it, we need to use the excluded option:

$('#profileForm').formValidation({
    framework: 'bootstrap',
    fields: {
        dob: {
            excluded: false,    // Don't ignore me
            validators: {
                notEmpty: {
                    ...
                },
                date: {
                    ...
                }
            }
        }
    }
});

Finally, when any of Date, Month and Year fields changes its value, we need to update the hidden field value and revalidate it using the revalidateField() method:

$('#profileForm').on('keyup', 'input[name="date"], input[name="month"], input[name="year"]', function(e) {
    var y = $('#profileForm').find('[name="year"]').val(),
        m = $('#profileForm').find('[name="month"]').val(),
        d = $('#profileForm').find('[name="date"]').val();

    // Set the dob field value
    $('#profileForm').find('[name="dob"]').val(y === '' || m === '' || d === '' ? '' : [y, m, d].join('.'));

    // Revalidate it
    $('#profileForm').formValidation('revalidateField', 'dob');
});

Here is the working example:

<style type="text/css">
/* There is no gutter between date, month and year fields */
.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}
.row.no-gutter .form-control-feedback {
    right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child) input {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.row.no-gutter [class*='col-']:not(:last-child) input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 0;
    padding-left: 0;
}
</style>

<form id="profileForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Birthday</label>
        <div class="col-xs-9">
            <div class="row no-gutter">
                <div class="col-xs-4">
                    <input type="text" class="form-control" name="date" placeholder="Date" />
                </div>

                <div class="col-xs-4">
                    <input type="text" class="form-control" name="month" placeholder="Month" />
                </div>

                <div class="col-xs-4">
                    <input type="text" class="form-control" name="year" placeholder="Year" />
                </div>
            </div>

            <!-- Create a hidden field which is combined by 3 fields above -->
            <input type="hidden" name="dob" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#profileForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                dob: {
                    excluded: false,    // Don't ignore me
                    validators: {
                        notEmpty: {
                            message: 'Please fill out each field'
                        },
                        date: {
                            format: 'YYYY.MM.DD',
                            separator: '.',
                            message: 'Please enter a valid date'
                        }
                    }
                }
            }
        })
        .on('keyup', 'input[name="date"], input[name="month"], input[name="year"]', function(e) {
            var y = $('#profileForm').find('[name="year"]').val(),
                m = $('#profileForm').find('[name="month"]').val(),
                d = $('#profileForm').find('[name="date"]').val();

            // Set the dob field value
            $('#profileForm').find('[name="dob"]').val(y === '' || m === '' || d === '' ? '' : [y, m, d].join('.'));

            // Revalidate it
            $('#profileForm').formValidation('revalidateField', 'dob');
        });
});
</script>

Related example

Using hidden field technique