Emitted when an EBT Element’s value changes.

The change EBT Element event object contains an additional complete field. The complete value is a boolean that indicates whether the EBT element contains a valid input.

{
  type: 'change',
  usecase: 'ebt_pin_check_balance',
  complete: true,
  error: null
}

Listen for error

Listen for an error value on the change event object to display input validation errors to the user.

Example

Display a message if there’s an event.error on change

ebtBalanceCheckElement.on('change', (event) => {
  const explainErrorSpan = document.getElementById('explain-error')
  if (event.error) {
    // show validation error to customer
    explainErrorSpan.textContent = event.error.message
  } else {
    // hide validation error
    explainErrorSpan.textContent = ''
  }
})

Listen for complete

Listen for the complete value on the change event object to change the UI when an input value is ready to submit.

Example

Enable a submit button if event.complete on change is true

ebtBalanceCheckElement.on('change', (event) => {
  const submitEbtBalanceCheck = document.getElementById('submit-ebt-balance-btn')
  if (event.complete) {
    // enable submit button
    setDisabled(false)
  }
});