vendredi 6 mai 2016

Reset an input component back to the original value

I have a component called phone-input that uses the jQuery Mask plugin to mask the input when typed to look more clean and phone number like.

So I've set tagname and such to input and set up everything so it works correctly, when the user types into the field it updates the value and when the mask is completed it fires up an action that the route/controller can catch and do something with, most of that is here

_didInsert: function(){
  this.$().mask('(000) 000.0000',{
    onComplete:(cep)=>{
      this.$().blur();
      this.$().parents('.input').addClass('working');
      this.sendAction('maskComplete',cep);
    },
    onChange:(cep)=>{
      this.sendAction('onKeyUp',cep);
    }
  });
}.on('didInsertElement')

This is in a user profile area where it's pre-filled with the users phone, I want to allow the user to change their phone but our system requires phone numbers to be unique so it will look up the phone to make sure someone else isn't already using it.

The thing I'm trying to do here is in my route I catch the maskComplete action and do an ajax lookup with it, if that comes back with a certain value (something like not found) I need to reset the input back to the original value so as to prevent the user from saving the profile anyway even if the system said someone else has the number.

I've tried various different things but I think this one might be a bit over my head or I may just be overlooking something, what would be the proper way to do this? I can use jQuery to set the value of the input but the mask doesn't hear that the value is being changed.




Aucun commentaire:

Enregistrer un commentaire