Customize layout and positioning of error messages of an adaptive form

Open CRXDE Lite. The default URL is https://‘[server]:[port]’/crx/de.

Copy a field layout from the /libs/fd/af/layouts/field node (For example, defaultFieldLayout) to the /apps node (For example, /apps/af-field-layout).

Rename the copied node and the defaultFieldLayout.jsp file. For example, errorOnRight.jsp.

Change the value of the qtip and jcr:description properties of the copied node. For example, change the value of the properties to Error On Right

To add new styles and behavior, create a client library in the /etc node.

For example, at the location /etc/af-field-layout-clientlib, create the node client-library. Add the categories property with value af.field.errorOnRight and style.less file with the following code:

.widgetErrorWrapper {

 height: 38px;
 margin: 5px;

 .guideFieldWidget{
 width: 60%;
 float: left;
 }

 .guideFieldError{
 overflow:hidden;
 width:40%;
 }

}

To enhance the appearance and behavior, include the client library created in the layout file (errorOnRight.jsp).

Open the edit dialog box of the field and select the Styling tab. In the Configure Field Layout drop-down box, select the newly created layout, and click OK.