validation-summary
Place a validation summary before the related fields when submission reveals several errors. Each message links directly to its native form control.
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Validation Summary</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="validation-summary-demo">
<main class="visual-example">
<aside role="alert" tabindex="-1">
<header>
<h2>There are two problems with this form</h2>
<p>Correct the fields below, then submit again.</p>
</header>
<ul>
<li><a href="#customer-name">Enter a customer name.</a></li>
<li><a href="#customer-email">Enter a valid email address.</a></li>
</ul>
</aside>
<form>
<label for="customer-name">Customer name</label>
<input id="customer-name" required />
<label for="customer-email">Email</label>
<input id="customer-email" type="email" required />
</form>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Authored validation messages linked to form controls.
Anatomy
Root styling selector
aside[role="alert"]:has(> header + ul)
Semantic structure
Use role="alert" on a semantic aside containing a direct header followed by a list of links to invalid controls. No classes or part markers are required.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
role | Authored | Explicit semantic role when native HTML does not provide one. |
tabindex | Authored | Keyboard focus order for composite descendants. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Validation Summary presents authored error links. Native form validation, AngularTS form controllers, server responses, message visibility, and focus policy remain application-owned.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Give the summary a heading and link every message to its corresponding control. Use an alert or live region when errors appear after submission, then apply application focus policy deliberately.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.