Emit events when validating fields

[colinmollenhour]

Could you emit events about field validation at the same time that the .valid and .invalid classes are set? For example:

    var hps = new Heartland.HPS({
      publicKey: 'pkapi_cert_jKc1FtuyAydZhZfbB3',
      type:      'iframe',
      // Configure the iframe fields to tell the library where
      // the iframe should be inserted into the DOM and some
      // basic options
      fields: {
        cardNumber: {
          target:      'iframesCardNumber',
          placeholder: '•••• •••• •••• ••••',
          onValidation: function(isValid, cardType) {
            // Update UI knowing if card is valid and which card type is used
          }
        },
        ...
      },
     ...
    });

This would help immensely in making our UI as functional with iFrames as it was before.

Thanks!

[slogsdon]

Hi @colinmollenhour!

We have a general solution available for this today exposed through an onEvent callback that can be passed:

var hps = new Heartland.HPS({
  type: 'iframe',
  fields: { /**/ },
  // ...
  onTokenSuccess: function (resp) { /**/ },
  onTokenError: function (resp) { /**/ },
  onEvent: function (event) { /**/ }
);

where the event object passed to the callback follows the form:

{
  classes: [], // string[]. all classes attached to the field
  data: {}, // data about the event. e.g. keyboard events set a `keyCode` property
  source: 'cardNumber', // this string matches the property name from `fields` above
  type: 'keyup' // this will match the JS/DOM event name
}

You can look at a full example of using this method for ensuring all fields have data on JSFiddle: https://jsfiddle.net/wqfdt8cx/2/.

Please let us know if you have any questions/concerns.

[colinmollenhour]

Ahh, that's perfect, thanks for providing the example! I looked through the source code and didn't see this feature before but it will work perfectly. Nice library!

[slogsdon]

Awesome! Please let us know if you have any questions moving forward.