Excluded plugin

Ignore validations on particular field

Usage

This plugin allows you to indicate fields which won't be validated. By default, the plugin will not validate the following kind of fields:

  • disabled
  • hidden
  • invisible

The following piece of code is the starting point to use the Excluded plugin:




    


    
...
document.addEventListener('DOMContentLoaded', function(e) { FormValidation.formValidation( document.getElementById('demoForm'), { fields: { ... }, plugins: { excluded: new FormValidation.plugins.Excluded({ excluded: function(field, element, elements) { // field is the field name // element is the field element // elements is the list of field elements in case // we have multiple elements with the same name // return true if you want to exclude the field } }), ... }, } ); });

The sample code above assumes that the FormValidation files are placed inside the vendors directory. You might need to change the path depending on where you place them on the server.

Basic example

In the following form, there are two invisible fields called Job title and Department. Since they are not visible initially, they will not be validated when you click the Submit button.

Clicking the More info button will turn them into visible fields, and as result, they will be required due to their validation rules.

Advanced example

Consider the following example. It asks you about the Javascript framework you like most. You can choose one from the list of popular Javascript frameworks such as Angular, Ember, React, Vue.

If your favorite framework is not in the list, you must fill its name in a text box. You can use the callback validator to validate this input:


FormValidation.formValidation(
    form,
    {
        fields: {
            framework: {
                validators: {
                    notEmpty: {
                        message: 'Please select a framework'
                    }
                }
            },
            otherFramework: {
                validators: {
                    callback: {
                        message: 'Please specific the framework',
                        callback: function(input) {
                            const selectedCheckbox = form.querySelector('[name="framework"]:checked');
                            const framework = selectedCheckbox ? selectedCheckbox.value : '';
    
                            return (framework !== 'other')
                                    // The field is valid if user picks 
                                    // a given framework from the list
                                    ? true
                                    // Otherwise, the field value is required
                                    : (input.value !== '');
                        }
                    }
                }
            },
        },
        plugins: {
            ...
        },
    }
);

The logic inside the callback function is quite simple and easy to understand. The problem comes when you submit the form, the otherFramework field is marked as valid with a valid icon even if you choose a framework from the list. In that case, the otherFramework field should be completely ignored.

In order to fix that, we can use the excluded option as following:


FormValidation.formValidation(
    form,
    {
        fields: {
            framework: {
                validators: {
                    notEmpty: {
                        message: 'Please select a framework'
                    }
                }
            },
            otherFramework: {
                validators: {
                    notEmpty: {
                        message: 'Please specific the framework',
                    }
                }
            },
        },
        plugins: {
            excluded: new FormValidation.plugins.Excluded({
                excluded: function(field, ele, eles) {
                    const selectedCheckbox = form.querySelector('[name="framework"]:checked');
                    const framework = selectedCheckbox ? selectedCheckbox.value : '';
                    return (field === 'otherFramework' && framework !== 'other')
                            || (field === 'framework' && framework === 'other');
                },
            }),
        },
    }
);

Tip

When the field validation is ignored, its container will not have the success class, and the associated icon isn't shown.

Changelog

  • v1.3.0: First release. It means that the Excluded plugin requires FormValidation v1.3.0 or newer.