Getting the current element in custom validator

[trippo80]

I have a custom validator where I check for the availability of a username/email address. This check is done by making a call to an external api. While this request running I would like to indicate this to the user (for example by disabling the input and showing a spinner icon).

Is there some way to get the current element in a custom validator so I can add a class while the request is running?

[kazupon]

Thank you for your comment !!

There is not way to get the current element in a custom validation.
In async validation, I think it is important to we provide any user interaction to user.

I'll try to consider your request as new feature for v2.0 (#41).

[trippo80]

@kazupon Is there a way to trigger an error from the controller it self? If so I could add a blur/change event and do the validation and then trigger the vue-validator error from that event method.

Pseudocode:

module.exports = {
  data: function() {
    email: null
  },
  watch: {
    'email': function(val, oldVal) {
      // one way of validating the email is to watch the model for changes
      if( ! apiValidateEmail(val) ) {
        // email didn't validate so we need to trigger an error on vue-validator
        SOMETHING SOMETHING;
      }
    }
  }
  ready: function() {
    // another way of validating is to watch the input itself for change events
    this.$el.querySelectorAll('input.email').on('change', function(e) { 
      if( ! apiValidateEmail( this.val() ) ) {
        // email didn't validate so we need to trigger an error on vue-validator
        SOMETHING SOMETHING;
      }
    });
  }
}

[kazupon]

Hm,
As an alternative way, There is way manually validation result setting.

module.exports = {
  data: function() {
    email: null
  },
  validator: {
    validates: {
      // define dummy custom validator
      async: function (val) {
        return true
      }
    }
  },
  watch: {
    'email': function(val, oldVal) {
      // one way of validating the email is to watch the model for changes
      if( ! apiValidateEmail(val) ) {
        // email didn't validate so we need to trigger an error on vue-validator

        // set the manually validation result
        this.$set('validation.email.async', false)
      }
    }
  },
  ready: function() {
    var self = this

    // another way of validating is to watch the input itself for change events
    this.$el.querySelectorAll('input.email').on('change', function(e) { 
      if( ! apiValidateEmail( this.val() ) ) {
        // email didn't validate so we need to trigger an error on vue-validator

        // set the manually validation result
        self.$set('validation.email.async', false)
      }
    });
  }
}

[trippo80]

@kazupon this.$set() was exactly what I needed. Thanks!

This might not be the best solution in the world but it's ok as a workaround until (hopefully) vue-validator facilitates this need :)

Thanks again!

Btw - do you want this issue closed or open for the future ?

[kazupon]

Please remain the open. after i finished v2.0 development, l close the issue.