Delay and previous rules get ignored on custom validation

Versions:

• VueJs: 2.1.0
• Vee-Validate: 2.0.0-beta.18

Description:

When i use a custom rule the delay gets ignore. The rule gets fired instantly. Also, it seems that the previous rules (in this context “required” and “email”) get ignored this way, because my custom rule always fires, even when the field is failing the required and email rules. I’m kinda used to an Angular library that first checked if the rules (in this context: required and email) were valid. Which makes a bit more sense to me.

Below the rule that check’s if the e-mail address is already used, if so, display an error. I need to do an API call for this. So, if the API says it exists, show an error. If it does not exist, the field is valid.

This all works good. Except when you type your e-mail address in the field, it does the API call immediately. So, if you have a 20 character email address, it fires 20 times.

If this is by design, i would suggest to first check if the previous rules (in this case: required and email) are valid. And after that do the custom rule, using the delay if given.

Steps To Reproduce:

export const checkIfEmailExists = {
  getMessage (field, params, data) {
    return (data && data.message)
  },
  validate (email, fieldName) {
    const payload = {
      email: email
    }
    return Vue.http.post('search/users', payload)
    .then(response => {
      if (response.status === 200 && response.data.length) {
        return {
          valid: false,
          data: {
            message: `There is already an account with this e-mail address. Is that you? <a href="/login">Login</a>`
          }
        }
      } else {
        return {
          valid: true
        }
      }
    })
    .catch(error => {
      console.error('Error checking the e-mail address', error)
      return {
        valid: false,
        data: {
          message: `There was an error checking the e-mail address. Please try again later. Sorry!`
        }
      }
    })
  }
}

VeeValidate.Validator.extend('checkIfEmailExists', ValidatorRules.checkIfEmailExists)

<input type="email" id="email" name="email" placeholder="E-mail address" v-model="email" v-validate.initial="email" data-vv-rules="required|email|checkIfEmailExists" data-vv-delay="1000" :class="{'error': errors.has('email') && submitted }" />

[logaretm]

@gfviegas Actually never got the chance to work on it, but it is very high on my list and shouldn’t be hard to implement, in a couple of days probably.

[gfviegas]

@assembledadam uuuggh, this is so off topic…

But you just need to use the v-html in your html to render html tags properly