Delay and previous rules get ignored on custom validation

[jvandenaardweg]

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]

I guess it's a valid suggestion, The validator doesn't early exit when a value fails at some point on the validation stack which is by design so far.

From a glance I don't think changing the behavior to what you suggest will have any breaking changes which is good. But I guess it will be annoying when dealing with promises.

I will try to test it out once I'm done with the PR #202

Thanks

[gfviegas]

@logaretm any progress?

[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.

[assembledadam]

@jvandenaardweg Hey - just looking at the code in your OP, and your error message contains HTML. Specifically here:

data: {
  message: `There is already an account with this e-mail address. Is that you? <a href="/login">Login</a>`
}

I can't get HTML to render in error messages - it just shows up literally. Did this work for you?

[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

[assembledadam]

Sorry! Didn't occur to me it wasn't a Vee issue & thoroughly searched the docs / issues and couldn't see anything more closely related / didn't want to open a whole topic.

But I really appreciate the tip, thanks!