Validating multiple, comma-separated, email addresses always fails

[christopherallanperry]

What happened?

Vue: v2.7.14
Vee-Validate: v3.4.15

I'm currently working on building an email input component within a larger component library for work purposes.

For single email addresses, the validation works as expected, and is outputting locally defined error messages when an attempt is made to save when an email address is either missing, or incorrectly formatted.

For multiple emails though, things are failing when a correctly formatted set of email addresses is entered (e.g. chris@example.com, test@example.com).

The component I'm building is structured along the lines of - hopefully I've not redacted something important to the understanding of the use case.

<template>
    <div>
        <validation-provider>
            <error-message
                :validation="{ errors, invalid }"
                :custom-error="customError"
                @error="handleError"
            >
                <!-- @slot For adding any custom error messages that are not created by vee-validate -->
                <slot name="custom-error-message" />
            </error-message>

            <input
                :id="id"
                ref="input"
                v-model="userInput"
                v-bind="additionalAttributes"
                type="email"
                :placeholder="`e.g. lesley@smith.com`"
                @input="handleInput"
            >
        </validation-provider>
    </div>
</template>
<script>
import { ValidationProvider } from 'vee-validate';
import ErrorMessage from '../other/ErrorMessage.vue';

/**
 * An 'email only' input box capable of supporting both single and multiple email address entry
 */
export default {
    name: 'InputEmail',
    components: {
        ValidationProvider,
        ErrorMessage
    },
    props: {
        /**
         * The id for the input element, and the
         * basis for all related elements
         */
        id: {
            type: String,
            required: true
        },
        /**
         * Is this field required for form submission?
         */
        required: {
            type: Boolean,
            required: false,
            default: false
        },
        /**
         * Roughly how wide the input should be to indicate to the
         * user the estimated size of the expected answer.
         */
        characterWidth: {
            type: Number,
            required: false,
            default: 75
        },
        /**
         * @model
         */
        value: {
            required: true,
            validator: val => val === null || typeof val === 'string' || typeof val === 'number'
        },
        /**
         * Flag indicating if multiple files are accepted
         */
        multiple: {
            type: Boolean,
            required: false,
            default: false
        },
        /**
         * Whether or not to show the component's custom error message
         */
        customError: {
            type: Boolean,
            required: false,
            default: false
        },
        /**
         * The vee-validate rules to be used for validation. Individual
         * rules should be separated by a pipe `|` character.
         * 
         * DO NOT add 'email' to the list of rules, as VeeValidate is able to infer
         * this from the built-in input type. A filter has been added to remove an
         * 'email' rule if present to support this and support the use of multiple
         * addresses.
         * See vee-validate issue: https://github.com/logaretm/vee-validate/issues/2837
         */
        rules: {
            type: String,
            required: false,
            default: ''
        },
        /**
         * Additional input attributes that can be used.
         * e.g. "disabled" or "readonly" - passed in as object: {readonly: true, disabled: true}
         */
        attributes: {
            type: Object,
            required: false,
            default: () => {}
        },
    },
    data() {
        return {
            userInput: null,
            error: false
        };
    },
    computed: {
        /**
         * Generate a vee-validate rules string
         * @returns {String}
         */
        validationRules() {
            let { customError, required, rules } = this;
            
            // Remove 'email' rule if included in rules prop
            rules = this.filterRules(rules, 'email');

            return [
                required ? 'required' : null,
                customError ? 'custom-error' : null,
                rules
            ]
                .filter(x => x)
                .join('|');
        },
        /**
         * The additional attributes for the input element.
         * Mixes type specific attributes with ones passed in
         * via the `attributes` prop
         * @returns {Object}
         */
        additionalAttributes() {
            const attrs = { ...this.attributes };

            // cleanup any attributes that are reserved for the app to work out
            delete attrs.type;
            delete attrs.required;
            delete attrs.placeholder;

            // add/remove input type specific attributes            
            switch (this.inputType) {
            case 'email':
                attrs.autocorrect = 'off';
                attrs.spellcheck = false;
                break;
            }

            return attrs;
        }
    },
    methods: {
        /**
         * A method used to remove unwanted rules from those to be
         * provided to the validation-provider
         * @param {String} rulesString 
         * @param {String} filterValue 
         */
        filterRules(rulesString, filterValue) {
            let filteredString = '';

            if(rulesString !== '') {
                filteredString = rulesString.split('|')
                    .filter(x => x !== filterValue)
                    .join('|');
            }

            return filteredString;
        },
        handleInput() {
            /**
             * The event used by the v-model
             * @param {String} userinput
             */
            this.$emit('input', this.userInput);
        },
        /**
         * Store and emit current validation status for this component
         * @param val
         */
        handleError(val) {
            this.error = val;
            const model = { id: this.id, error: this.error };
            /**
             * The current error status of this input
             * @param {Object} val
             * @param {String} val.id The id of the component
             * @param {Boolean} val.error true/false for the current error status
             */
            this.$emit('error', model);
        }
    }
};
</script>

As you should see, I am trying to make use of vee-validate's ability to infer the input type, and have created a filter to remove any email rule that could get passed in as a prop, and so avoid the issue described here #2837.

My test use of the component looks as follows:

<template>
    <div>
        <h1>Email inputs</h1>

        <!-- email -->
        <input-email
            id="email-example"
            v-model="email"
            required
            rules="max-length:255"
            @error="inputError"
        >
            Email
        </input-email>
        <input-email
            id="email-example-multiple"
            v-model="emailMultiple"
            required
            rules="max-length:255"
            multiple
            @error="inputError"
        >
            Email (multiple addresses)
        </input-email>
    </div>
</template>

<script>
import InputEmail from '../components/inputs/InputEmail.vue';

export default {
    name: 'EmailExample',
    components: {
        InputEmail
    },
    
    data: () => ({
        readonly: 'This text is readonly',
        email: null,
        emailMultiple: null
    }),

    methods: {
        inputError(val) {
            // eslint-disable-next-line
            console.log('Input error', val);
        }
    }
};
</script>

As far as my understanding goes, I don't think I'm falling foul of the warning in the documentation regarding rules and their use on custom components, as the validation is being called directly on a native HTML <input type="email">.

This leaves me with the manner in which the email rule from vee-validate/dist/rules has been configured. This was all set up a good while before I joined the team. It's configured as below and I'm guessing this may (?) need a bit of reworking to accommodate the use of the multiple attribute where used.

<script>
import { extend } from 'vee-validate';
import { email } from 'vee-validate/dist/rules';

extend('email', {
    ...email,
    message: 'Please enter a valid email address. For example, alex@example.com'
});

Any pointers would be much appreciated.

Reproduction steps

Please let me know if the description above is inadequate, and I'll try and put a cut down version together.

Version

Vue.js 2.x and vee-validate 3.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

None available

Demo link

n/a

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Hey, I moved this to discussions since it is more of a question.

The inferred rule behavior only works on native HTML inputs. You can turn on multiple email validation by passing true if I remember correctly.

required|email:true

[christopherallanperry]

My initial tests in a demo app are seeing this work correctly. I've still to apply it to the piece of work I discovered the issue in, but so far it looks good.

Could this be added to the documentation somewhere, as I didn't find anything that would suggest this would fix the problem I was having?

[logaretm]

v3 is no longer active, feel free to PR it tho on the v3 branch.