Getting started with validations, Formik and Yup

Contents

• Carbon validation overview
  • Inputs
  • Grouped inputs
  • Validation icon placement
• Formik overview

Carbon validation overview

Carbon provides inputs which are able to visually indicate three states of validations out of the box.

• error  –  meant to be a blocking validation, displays 2px wide red border and validation icon if message is provided.
• warning  –  meant to be a non-blocking validation, displays 1px wide orange border and validation icon if message is provided.
• info  –  meant to be a non-blocking validation, displays 1px wide blue border and validation icon if message is provided.

Inputs

Each input component which supports validations accepts following props - error, warning or info.

Passing a string to these props will display a border along with a validation icon and tooltip; this string value will be displayed as the tooltip message.

<Textbox name="name" value={value} onChange={onChange} error="Message" />
Copy

Passing a boolean to these props will display a border and validation icon without the additional tooltip information.

<Textbox name="name" value={value} onChange={onChange} error={true} />
Copy

The only exception from this is the DateRange component which displays separate validation statuses on either start or end dates - to achieve this the DateRange component accepts startError, endError, startWarning, endWarning, startInfo and endInfo props.

<DateRange
  name="name"
  value={value}
  onChange={onChange}
  startError="Start message"
  endError="End message"
/>
Copy

Grouped inputs

Grouping components like RadioButtonGroup, CheckboxGroup and ButtonToggleGroup support validations too.

Passing validation props on a group component will display a validation icon on the group label/legend and apply proper styles to the grouped inputs.

The interface is the same - it's up to the consumer to decide whether to display validation on the group label/legend or on the individual component.

<RadioButtonGroup
  legend="Legend"
  name="name"
  value={value}
  onChange={onChange}
  error="Validation on group legend"
>
  <RadioButton value="1" />
  <RadioButton value="2" />
</RadioButtonGroup>
Copy

<RadioButtonGroup name="name" value={value} onChange={onChange}>
  <RadioButton value="1" error="Validation on first grouped component" />
  <RadioButton value="2" />
</RadioButtonGroup>
Copy

Validation icon placement

Most of the input components support two variants of validation icon placement:

• by the component or next to it - default behaviour
• next to the component label or legend

To decide which placement is preferred validationOnLabel or validationOnLegend props can be used.

Form component

Carbon provides a Form component which augments an HTML <form> element with:

• footer - a container for rendering "Save", "Cancel" and other custom buttons; it can also be made sticky if wanted
• validation summary - graphical indicator of errors and warnings

For more information check Form in Storybook

Formik overview

Formik keeps track of your form's state, and then exposes it (plus a few reusable methods and event handlers) to your form via props. 🔗

Formik provides a small set of React components and hooks, of which the key ones are:

• Formik  –  The central component of Formik, which wraps an HTML form, and accepts props such as initialValues, onSubmit(), validate() and validationSchema().  It provides form state information (such as values, dirty, errors and isValid) and action methods (such as validateForm(), validateField() and setValues()).
• Form, Field, ErrorMessage  –  Helper components (powered by React Context) which reduce boilerplate code.
• useField()  –  A hook to help with building reusable input primitive components.

Note: Formik is only intended to be used with controlled components, where the component's state is controlled by supplying a value prop (or a checked prop for radio and checkbox).  Technically it's possible to use Formik with uncontrolled components (by not supplying a controlling value/checked prop, and only supplying name onChange onBlur props), but this is strongly discouraged ⚠️

Form validation using Formik

Formik supports three kinds of validation:

1. Form-level: plain  –  A values object is passed to a validate() function which implements its own custom validation logic and returns an errors object.
2. Form-level: schema-based  –  Performs validation using a Yup schema.
3. Field-level  –  Separate validate() functions are supplied for each form field.

Code examples

Form validation using Field-level validation, Yup as a schema builder and hooks