Tokenization Event

There are available events emitted by the hosted field instance that you can subscribe to. This can be done on the hostedField instance.

These events include:

Name	Event Description
focus	This event is emitted when a field gains focus
blur	This is emitted when a field loses focus
validityChange	This is emitted when the validity of a field changes
empty	This is emitted when the field becomes empty

See below an example using the focus and blur event:

Events

function findLabel(field)
{
    return $('.hosted-field--label[for="' + field.container.id + '"]');
}
hostedFieldInstance.on('focus', function (event) {
   var field = event.fields[event.emittedBy];
   findLabel(field).addClass('label-float').removeClass('filled');
});
                        
hostedFieldInstance.on('blur', function (event) {
   var field = event.fields[event.emittedBy];
   var label = findLabel(field);
   if (field.isEmpty) {
      label.removeClass('label-float');
    } else if (field.isValid) {
      label.addClass('filled');
    } else {
      label.addClass('invalid');
    }
});

How can we help?