Presenting Input Errors

This article will demonstrate the various ways to present input errors to your application users and their differences in user experience within Descope flows. By using these methods, we can reduce user confusion when interacting with inputs in our Flows.

Setting Up Input Errors

Pattern Matching

Some inputs will already have input validation, Email checks for valid emails, New Password checks the given password based on password policy. There are also inputs where you can use a regex pattern to check for valid input, such as Given Name, Input, and others. The entered data will be matched against the regex pattern.

Custom Error Messages

Some inputs will already have their own error messages for invalid input such as New Password and Invite Users. Most inputs will allow you to make your own custom error message. The errors will appear under the input field.

On Blur vs On Submission

On Submission

By default, flow components will be On Submission, which means that the error messages for invalid input will only show up once the user tries to submit the form. After submission, all associated errors will pop up under their respective fields. Whether you use On Blur or On Submission, the error will immediately disappear once the user enters valid input without submitting or clicking out of the field.

On Submission:

On Blur

Enabling On Blur means that when a user clicks out of an input field, the error message appears under the field if the input is invalid. On blur validation allows the user to fix their mistake immediately. To enable On Blur you pass the validateOnBlur prop as true in your Descope Component.

import { Descope } from '@descope/react-sdk'
 
const App = () => {
    return (
        {...}
        <Descope
            flowId="my-flow-id"
            onSuccess={(e) => console.log('Logged in!')}
            onError={(e) => console.log('Could not logged in')}
            validateOnBlur={true}
        />
    )
}

On Blur: