user11094184
user11094184

Reputation:

Validating an email address inside a chip

I'm trying to create a field where user can input multiple valid email addresses. Onclick 'Enter' key, the last inputted email will be validated if it's a valid email or not. I tried to do this with what I've come up with below but I don't have enough knowledge in Vue JS or Vuetify JS. I think my method of validating an email address is incorrect ( !(v => /.+@.+/.test(v)) ), I just took it from the Vuetify JS website's Form examples. I would like to ask- what is the correct method to validate emails in this kind of case?

Here is my code:

<template>
    <v-combobox v-model="chips"
                label="Emails"
                chips
                clearable
                solo
                :rules="emailRules"
                multiple>
        <template v-slot:selection="data">
            <v-chip :selected="data.selected"
                    close
                    @input="remove(data.item)">
                <strong>{{ data.item }}</strong>&nbsp;
            </v-chip>
        </template>
    </v-combobox>
</template>

<script>
    export default {
        data() {
            return {
                chips: [],
                emailRules :[
                    v => {
                        if (!v || v.length < 1)
                            return 'Input is required';
                        else if (v.length > 0) {
                            for (let i = 0; i < v.length; i++) {
                                if ((i == v.length-1) && !(v => /.+@.+/.test(v)))
                                    return 'Invalid email';
                            }
                        }
                        else return true;
                    }
                ]
            }
        },

        methods: {
            remove(item) {
                this.chips.splice(this.chips.indexOf(item), 1)
                this.chips = [...this.chips]
            }
        }
    }
</script>

Thanks a lot!

Upvotes: 0

Views: 1412

Answers (1)

user11094184
user11094184

Reputation:

I did it like this:

if (!(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,24}))$/.test(v[i]))) {
     return 'Invalid email';
}

It now works.

Upvotes: 2

Related Questions