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', '[e-mail]');

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

Context API

Key	Type	Description
Form Context		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	triggerData	The info of the error trigger.

triggerData Definition

Key	Type	Description
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.