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

Validating checkbox list placed in multiple columns

In this example, you will see how to validate a list of checkboxes which are placed in multiple columns.

The following form asks us to choose at least one day that we will be notified when the event is going to happen. The list of days are placed inside two columns which have the same col-xs-6 class.

We need to define the elements that display the feedback icon and error message:

<div class="form-group">
    <!-- The feedback icon will be placed here -->
    <span id="alertDayIcon"></span>

    <div class="row">
        <div class="col-xs-6">
            <!-- The first three checkboxes ... -->
        </div>

        <div class="col-xs-6">
            <!-- The other three checkboxes ... -->
        </div>
    </div>

    <!-- The container to place the error of checkboxes -->
    <div id="alertDayMessage"></div>
</div>

To show the feedback icon at the element #alertDayIcon, we can handle the init.field.fv event that is trigger right after initializing the fields and feedback icon element:

$('#eventForm')
    .on('init.field.fv', function(e, data) {
        // data.field   --> The field name
        // data.element --> The field element
        if (data.field === 'alertDay') {
            var $icon = data.element.data('fv.icon');
            $icon.appendTo('#alertDayIcon');
        }
    })
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            ...
        }
    });

For more information, look at the Showing icons in custom area example

The last step is to use the err option to indicate the container where the associated messages are shown:

$('#eventForm')
    .formValidation({
        framework: 'bootstrap',
        icon: {
            ...
        },
        fields: {
            alertDay: {
                err: '#alertDayMessage',    // The error message container
                validators: {
                    notEmpty: {
                        message: 'Please choose at least one checkbox'
                    }
                }
            }
        }
    });

The Showing messages in custom area example demonstrates a few of similar usecases

<form id="eventForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label>Event name</label>
        <input type="text" class="form-control" name="name" style="width: 200px;" />
    </div>

    <div class="form-group">
        <label>Alert on</label>
    </div>

    <div class="form-group">
        <!-- The feedback icon will be placed here -->
        <span id="alertDayIcon"></span>

        <div class="row">
            <div class="col-xs-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="0" name="alertDay" /> On event day
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="1" name="alertDay" /> 1 day before
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="2" name="alertDay" /> 2 days before
                    </label>
                </div>
            </div>

            <div class="col-xs-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="3" name="alertDay" /> 3 days before
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="7" name="alertDay" /> 1 week before
                    </label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="14" name="alertDay" /> 2 weeks before
                    </label>
                </div>
            </div>
        </div>

        <!-- The container to place the error of checkboxes -->
        <div id="alertDayMessage"></div>
    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-default">Validate</button>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#eventForm')
        .on('init.field.fv', function(e, data) {
            // data.field   --> The field name
            // data.element --> The field element
            if (data.field === 'alertDay') {
                var $icon = data.element.data('fv.icon');
                $icon.appendTo('#alertDayIcon');
            }
        })
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'The event name is required'
                        }
                    }
                },
                alertDay: {
                    err: '#alertDayMessage',
                    validators: {
                        notEmpty: {
                            message: 'Please choose at least one checkbox'
                        }
                    }
                }
            }
        });
});
</script>

Validating checkbox list placed in multiple columns

Related ejemplos