4.1.1 Inline Form errors

Toggle example guides Toggle HTML markup

Added in release 1.6

For this feature the module Inline Form Errors should be enabled.

Alerts

When a form is submitted the user receives an alert message with either a confirmation the form is submitted successfully or with the feedback that there is an error. The feedback will then contain a link to the inline form feedback.

Inline feedback

The form-group div will get a class has-error which can be used to style any form element (children). The feedback is placed in a small dismissable alert. All the other fields remain in there original form.

Example
*
Email field is required.
We'll never share your email with anyone else.
Markup: 03-molecules/form-elements/inline-form-error.twig 
<div class="form-group has-error">
  <label class="control-label" for="exampleInputEmail1">Email address</label><span class="form-required">*</span>
  <input type="email" id="exampleInputEmail1" required class="form-control" placeholder="Enter email">
  <div class="form-item--error-message alert alert-danger alert-sm alert-dismissible form-control-radius">
    <a href="#" role="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></a>
    Email field is required.
  </div>
  <div class="help-block">We'll never share your email with anyone else.</div>
</div>
Source: 03-molecules/form-elements/form-elements.scss, line 14