CODEWITHSUNDEEP
javascriptregexvalidationvue.jsvuelidate
Matt Larsuma
Matt Larsuma

Reputation: 1519

Vuelidate validation for comma seperated list of multiple emails

I'm using vuelidate's email validator for this form: 

    <div class="form-group" :class="{ 'has-error': $v.newParcel.onSiteContactEmail.$error }">
      <label for="onSiteContactEmail">OnSite Contact Email</label>
      <input type="email" name="onSiteContactEmail" id="onSiteContactEmail" class="form-control" v-model="newParcel.onSiteContactEmail" @input="$v.newParcel.onSiteContactEmail.$touch" maxlength="255">
      <span v-show="$v.newParcel.onSiteContactEmail.$error || !$v.newParcel.onSiteContactEmail.email" class="help-block">Please provide a valid OnSite Contact Email</span>
    </div>

Which works great, but does't validate a comma separated list of emails. The validator code has a regex variable: 

const emailRegex = /(^$|^(([^<>()[\]\\.,;:\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,}))$)/

And I am attempting to customize that in my validations method:

onSiteContactEmail: 
  {
    required: required, 
    type: email, 
    emailRegex: /(^$|^(([^<>()[\]\\.,;:\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,}))+$)/
  }

If anyone has any ideas on this, I'd be super grateful!

Upvotes: 3

Views: 3820

Answers (3)

balamurugan kannan
balamurugan kannan

Reputation: 1

sample.js

export function hasMultipleEmails(value) {
    if (value == '' || value == null || value === 'undefined') {
        return true;
    }
    else {
        return (/(([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)(\s*;\s*|\s*$))+/.test(value)) ? true : false;
    }
}

sample.vue

import {hasMultipleEmails} from "../../../test/sample"

<input type="text" v-model="multipleEmailNotifications"/>

<div v-if="submitted && !multipleEmailNotifications.hasMultipleEmails" class="invalid-feedback d-block">
<span>Email is invalid</span>
</div>

*input type must be "text"

validations: {
    multipleEmailNotifications:hasMultipleEmails
}

Upvotes: 0

Tlaloc-ES
Tlaloc-ES

Reputation: 5282

You can do of the following way:

<script>

import { required, minLength, between } from 'vuelidate/lib/validators'

export default {

  data: function () {
      ...
  },

  methods: {
      ...
  },

  validations: {
    contact: {
      firstname: {
        required,
        minLength: minLength(4)
      },
      address: {
        correctAddress (address) {
          return /[a-z]/.test(address)
        }
      }
    }
  }

}
</script>

As you can see, in validations.addres, there is a new function this functions is used in order to make a custom validation for your field.

Upvotes: 0

Matt Larsuma
Matt Larsuma

Reputation: 1519

Nevermind, I just created a custom validator:

const customEmail = value => {
  if (typeof value === 'undefined' || value === null || value === '') {
    return true
  }
  return /^[\W]*([\w+\-.%]+@[\w\-.]+\.[A-Za-z]{2,4}[\W]*,{1}[\W]*)*([\w+\-.%]+@[\w\-.]+\.[A-Za-z]{2,4})[\W]*$/.test(value)
}

Upvotes: 1

Related Questions