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:


Alert on

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';
            },
        }),
    },
});

Tip

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.