This site contains the document for old version. Please upgrade to the latest version v1.0.0

Using hidden field technique

This example introduces a technique of using a hidden field. It's often used when we need to treat a few of inputs as one.

For instance, let's assume that we need user to provide one of telephone or cellphone number.

Firstly, we create a hidden field for storing one of these phone numbers.

<form id="profileForm" method="post" class="form-horizontal">
    ...

    <!-- Original fields -->
    <input type="text" class="form-control" name="telephone" placeholder="Telephone number" />
    <input type="text" class="form-control" name="cellphone" placeholder="Cell phone number" />

    <!-- The hidden field -->
    <input type="hidden" name="hiddenPhone" />
</form>

FormValidation will ask the hidden field to not empty. Because FormValidation ignores hidden fields by default, we need to use the excluded option for our particular field:

$('#profileForm').formValidation({
    framework: 'bootstrap',
    icon: {
        ...
    },
    fields: {
        hiddenPhone: {
            excluded: false,    // Don't ignore me, please!
            validators: {
                notEmpty: {
                    message: 'Please provide either telephone or cellphone number'
                }
            }
        }
    }
});

The last step, whenever we detect that any of the original phone fields are modified, we update the value for the hidden field and revalidate it:

$('#profileForm')
    .formValidation({
        ...
    })
    .on('keyup', '[name="telephone"], [name="cellphone"]', function(e) {
        var telephone = $('#profileForm').find('[name="telephone"]').val(),
            cellphone = $('#profileForm').find('[name="cellphone"]').val();

        $('#profileForm')
            // Update the value for hidden field
            .find('[name="hiddenPhone"]')
                .val(telephone || cellphone)
                .end()
            // Revalidate it
            .formValidation('revalidateField', 'hiddenPhone');
    });

This technique is also used in the Validating multiple inputs as one example

<style>
.phone-container .form-control {
    display: inline-block;
    width: 200px;
}
</style>

<form id="profileForm" method="post" class="form-horizontal">
    <div class="form-group phone-container">
        <label class="col-xs-3 control-label">Phone number</label>

        <div class="col-xs-9">
            <div>
                <input type="text" class="form-control" name="telephone" placeholder="Telephone number" />
                <span style="margin: 0 10px;">or</span>
                <input type="text" class="form-control" name="cellphone" placeholder="Cell phone number" />
            </div>

            <input type="hidden" name="hiddenPhone" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Submit</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: {
                hiddenPhone: {
                    excluded: false,    // Don't ignore me, please!
                    validators: {
                        notEmpty: {
                            message: 'Please provide either telephone or cellphone number'
                        }
                    }
                }
            }
        })
        .on('keyup', '[name="telephone"], [name="cellphone"]', function(e) {
            var telephone = $('#profileForm').find('[name="telephone"]').val(),
                cellphone = $('#profileForm').find('[name="cellphone"]').val();

            $('#profileForm')
                // Update the value for hidden field
                .find('[name="hiddenPhone"]')
                    .val(telephone || cellphone)
                    .end()
                // Revalidate it
                .formValidation('revalidateField', 'hiddenPhone');
        });
});
</script>

In this example, we only require either telephone or cellphone numbers by using the notEmpty validator. This approach doesn't solve the problem if we need to apply more validator rules such as the phone number must consist of digits only.

In these cases, you need to use the solutions introduced in the Conditional validation example.