4.1.1 molecules.form-elements.inline-error Inline Form errors
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.
*
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