onError()

This event handler runs when the form runs into a validation error.

Overview

onError is a <Feathery.Form> prop and callback function to access and modify form state when an error has occurred in the form.

For example, it's triggered when an integration fails or when the user fills out invalid information. If an error is manually set via the React library, this callback will not be triggered. This function can be asynchronous.

Usage

You can use onError to navigate to a new step, update field values, and more. The function takes a single Context object that provides form-related state and handlers.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    onError={(context) => {
      context.setStep('Step 4');
    }}
  />
}

Context API

KeyTypeDescription

Consistently available form state and functions

errorFieldId

string

The ID of the field that is erroring.

errorFieldType

string enum

The type of the field that is erroring.

errorMessage

string

The error message.

trigger

The info of the error trigger.

triggerData Definition

KeyTypeDescription

id

string

The ID of the element that triggered the error.

text

string

The text displayed on the element that triggered the error.

type

string enum

The type of element that triggered the error. Can be button, text, or field.

repeatIndex

integer

If the element that errored repeats, this specifies which repetition it is. This value is 0-indexed and equals 0 if the element doesn't repeat.

Return value

A promise can be optionally returned from this function if it's asynchronous and you want execution to await.

Last updated