Validating fields placed in table cells

This example demonstrates how we can validate fields which are placed in table cells. It would like to know five projects you have done recently. The form is available in both Bootstrap plugin and Tachyons plugin frameworks, but you can use the same principle for other library or framework.

By default, the Bootstrap plugin will look for the .form-group element and determine where it can display the error message and feedback icons. In our case, since the fields are placed inside a table cell which is a td element, we need to let the plugin know about it:

const form = document.getElementById('demoForm');
const fv = FormValidation.formValidation(form, {
    fields: {
        ...
    },
    plugins: {
        bootstrap: new FormValidation.plugins.Bootstrap({
            rowSelector: function(field, ele) {
                return 'td';
            },
        }),
    },
});

It requires us to modify the CSS a little bit to adjust icon position:

td .fv-plugins-icon {
    right: 10px;
    top: 10px;
}

Here is the final result:

Validating fields placed in table cells

Validating fields placed in table cells

See also