Form notifications - AUI Documentation

Summary

Form notifications are used to display description or error messages for form fields.

Status

API status:	experimental
Web resource key:	`com.atlassian.auiplugin:aui-form-notification`
AMD Module key:	`require('aui/form-notification')`
Experimental API:	5.7

Examples

Code

HTML

Use markup to display description for your form fields:

Input with an info notification

Choose a username at least 6 characters long

Input with an info notification

This field has a problemThis field has a problem
In fact, it has two problemsIn fact, it has two problems

Data attributes deprecated

Use HTML markup

Data attributes are deprecated and will be removed in future. Use HTML markup directly instead.

Create a field with the attribute data-aui-notification-field.

Info messages

Information about a field can be communicated by adding the data-aui-notification-info data attribute. The value of this attribute should be the message you wish to place on the field

Input with an info notification

Error messages

In the same way, you may put error messages on the field with the data-aui-notification-error data attribute.

Input with an error notification

The .error container is only present when there are a non-zero number of errors. It is removed from the DOM otherwise.

Stacked messages

You can stack multiple messages on a field at the same time. This can be done by making the array a JSON array string.

Input with multiple error notifications