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 w-50 class (assuming you're using the Tachyons framework).

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

<div class="cf mb2">
    <div class="fl w-100">
        <div class="fl w-25 pa2">Alert on</div>
        <div class="fl w-75">
            <div class="w-100 js-alert-field-container">
                <div class="fl w-50">
                    <!-- The first three checkboxes ... -->
                </div>
                <div class="fl w-50">
                    <!-- The other three checkboxes ... -->
                </div>

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

<div class="cf mb2">
    <div class="fl w-100">
        <div class="fl w-25 pa2"></div>
        <div class="fl w-75">
            <!-- The container to show the error of checkboxes -->
            <div id="alertDayMessage"></div>
        </div>
    </div>
</div>

The checkboxes are placed in the same row, inside .js-alert-field-container element. We need to let the Tachyons plugin know how it can find these fields:

const form = document.getElementById('demoForm');
const fv = FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        tachyons: new FormValidation.plugins.Tachyons({
            rowSelector: function(field, ele) {
                return field === 'alertDay' ? '.js-alert-field-container' : '.fl';
            },
        }),
    },
});

You should look at the rowSelector option when using multiple fields on the same row. Refer to the Multiple fields on the same row section when using with plugin supports popular CSS framework, such as Bootstrap, Tachyons, .etc

To show the feedback icon at the element #alertDayIcon, we need to use onPlaced option which is called when the icon element is inserted to the document:

const fv = FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        icon: new FormValidation.plugins.Icon({
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh',
            onPlaced: function(e) {
                if (e.field === 'alertDay') {
                    document.getElementById('alertDayIcon').appendChild(e.iconElement);
                }
            },
        }),
    },
});

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

const fv = FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        message: new FormValidation.plugins.Message({
            clazz: 'red lh-copy',
            container: function(field, ele) {
                return field === 'alertDay'
                        ? document.getElementById('alertDayMessage')
                        : FormValidation.plugins.Message.getClosestContainer(ele, form, /^(.*)fl(.*)$/);
            },
        }),
    },
});

Look at the Showing messages in custom area section for more details.

Validating checkbox list placed in multiple columns

Validating checkbox list placed in multiple columns

See also