Requiring at least one field

In fact, the form might have multiple fields with the same validator rules but at least one of them is required. We can't use neither the notEmpty validator nor HTML 5 required attribute for all of them.

Fortunately, this can be done easily by two things.

First, use the selector option to define validators for all fields. So, we don't need to indicate the validator rules for each separate field.

<form id="demoForm" method="POST">
    <input type="text" class="js-email-address" name="primaryEmail" placeholder="Primary email" />
    <input type="text" class="js-email-address" name="secondaryEmail" placeholder="Secondary email" />
    ...
</form>

<script>
    document.addEventListener('DOMContentLoaded', function(e) {
        const fv = FormValidation.formValidation(
            document.getElementById('demoForm'),
            {
                fields: {
                    email: {
                        // All the email address field have js-email-address class
                        selector: '.js-email-address',
                        validators: {
                            ...
                        },
                    },
                },
                plugins: {
                    ...
                },
            }
        );
    });
</script>

Using the class name prefixed by js-, js-email-address for example, is a good practice. It lets other developer in your team know that the field will be interactived by JavaScript. So it shouldn't be removed when other designers refactor the markup or CSS classes.

Next, use the callback validator to check if one of fields is not empty. And then update the result of callback validator via the updateFieldStatus() method.

const fv = FormValidation.formValidation(
    document.getElementById('demoForm'),
    {
        fields: {
            email: {
                // All the email address field have js-email-address class
                selector: '.js-email-address',
                validators: {
                    callback: {
                        message: 'You must enter at least one email address',
                        callback: function(input) {
                            let isEmpty = true;
                            const emailElements = fv.getElements('email');
                            for (const i in emailElements) {
                                if (emailElements[i].value !== '') {
                                    isEmpty = false;
                                    break;
                                }
                            }

                            if (!isEmpty) {
                                // Update the status of callback validator for all fields
                                fv.updateFieldStatus('email', 'Valid', 'callback');
                                return true;
                            }

                            return false;
                        }
                    },
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    },
                },
            }
        },
        plugins: {
            ...
        },
    }
);

In the sample code above, we use the getElements() method to get all the email elements.

Requiring at least one field

Requiring at least one field

See also