Form notifications

Ask a question Design guidelines

Summary

Form validation is used to provide an interface for validating form fields, and displaying feedback on problems.

Status

API status: experimental
Included in AUI core? Not in core You must explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-form-notification
AMD Module key: require('aui/form-notification')
Experimental API: 5.7

Examples

Code

HTML

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

AخA
 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input with an info notification</label>
        <input id="demo-info-message" class="text" type="text" data-aui-notification-field data-aui-notification-info="Choose a username at least 6 characters long">
    </div>
</form>

Error messages

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

 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input
            with an error notification</label>
        <input id="demo-info-message" class="text" type="text" data-aui-notification-field data-aui-notification-error="There is a problem with this field">
    </div>
</form>

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.

 
<form class="aui">
    <div class="field-group">
        <label for="demo-info-message">Input with multiple error notifications</label>
        <input id="demo-info-message" class="text" type="text" data-aui-notification-field data-aui-notification-error='["This field has a problem","In fact, it has two problems"]'>
    </div>
</form>