UI Patterns → Module Messages

Messages Demo

This is a warning!
This is informational!
This is a success message!
This is an error!
and this is a validation!

Pattern and Usage

Module messages are used when developers need to communicate to users the results of their interactions. The main goal of these messages is to enhance the user experience while they're interacting with the site or a module.

The above examples shows different patterns and usages of a variety of scenarios. Basically, there are four types of messages:

  • Success (.dnnFormSuccess): is used to communicate if a task is performed successfully
  • Informational (.dnnFormInfo): is used to provide additional information to assist users in completing a task
  • Warning (.dnnFormWarning): is used to give a warning about certain results will caused that might not be reversed when user performs this action
  • Error (.dnnFormValidationSummary or .dnnFormError): is used to communicate if an action performed unsuccessfully. For inline validation use .dnnFormError. Use .dnnFormValidationSummary to provide error summary report.

Depending on the type of action a user takes, it is recommended to use standard messaging as above to improve communication and prevent users from making mistakes.

The common element from this pattern is .dnnFormMessage. You must always start with this CSS selector then define the type of message (error, success, warning, or informational) by adding the appropriate CSS selector to get the desired effect. See the "View Markup" tab for the code example.