Help and Error Messages

Use the ariaDescribedby attribute to associate the help text or error message with a particular field.

1<ui:inputText label="Contact Name" ariaDescribedby="contact" />
2<ui:outputText aura:id="contact" value="This is an example of a help text." />

Using the input component to create and handle the ui:inputDefaultError component automatically applies the ariaDescribedby attribute on the error messages. If you want to manually manage the action, you will need to make the connection between the ui:inputDefaultError component and the associated output.

Your component should render like this example:

1<!-- Good: aria-describedby is used to associate error message -->
2<label for="fname">Contact name</label> 
3<input name="" type="text" id="fname" aria-describedby="msgid">
4<ul class="uiInputDefaultError" id="msgid">
5	<li>Please enter the contact name</li>
6</ul>