Echelon / Foundry Forma / Interface system
State & feedback

Validation summary

Focusable page-level error summary with links back to affected controls.

Canonical sourcepatterns/validation-summary.html
Behavior ownerApplication state
Runtime inside FormaNone
Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

View HTML 
<div class="ef-validation-summary" role="alert" tabindex="-1" aria-labelledby="ex1-validation-summary-validation-summary-title">
  <div class="ef-validation-summary__icon" aria-hidden="true">!</div>
  <div>
    <h2 class="ef-validation-summary__title" id="ex1-validation-summary-validation-summary-title">There are 2 responses to review</h2>
    <ul class="ef-validation-summary__list">
      <li><a href="#ex1-validation-summary-question-security">Question 4 requires a response.</a></li>
      <li><a href="#ex1-validation-summary-question-allocation">Question 8 must total 10 points.</a></li>
    </ul>
  </div>
</div>
Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

View HTML 
<div class="ef-validation-summary" role="alert" tabindex="-1" aria-labelledby="ex2-validation-summary-validation-summary-title">
  <div class="ef-validation-summary__icon" aria-hidden="true">!</div>
  <div>
    <h2 class="ef-validation-summary__title" id="ex2-validation-summary-validation-summary-title">There are 2 responses to review</h2>
    <ul class="ef-validation-summary__list">
      <li><a href="#ex2-validation-summary-question-security">Question 4 requires a response.</a></li>
      <li><a href="#ex2-validation-summary-question-allocation">Question 8 must total 10 points.</a></li>
    </ul>
  </div>
</div>
Example 3

Constrained layout

The canonical contract inside a narrow application region.

View HTML 
<div class="ef-validation-summary" role="alert" tabindex="-1" aria-labelledby="ex3-validation-summary-validation-summary-title">
  <div class="ef-validation-summary__icon" aria-hidden="true">!</div>
  <div>
    <h2 class="ef-validation-summary__title" id="ex3-validation-summary-validation-summary-title">There are 2 responses to review</h2>
    <ul class="ef-validation-summary__list">
      <li><a href="#ex3-validation-summary-question-security">Question 4 requires a response.</a></li>
      <li><a href="#ex3-validation-summary-question-allocation">Question 8 must total 10 points.</a></li>
    </ul>
  </div>
</div>