Form with Validation Summary Template

Improve usability and guide users by presenting all form errors in a convenient summary list.

When a user submits an invalid form, this template prevents submission and instead generates a summary box at the top, listing all errors with clickable links to the corresponding fields.

Screenshot of a form with a red error summary box at the top, listing all validation failures.

Get Source Code → Preview →

About this Validation Summary Form

For long forms, users might not see an inline error that's off-screen. A validation summary solves this by gathering all errors in one place. This pattern is a major usability win and is recommended by the W3C.

The workflow, managed by JavaScript, is as follows:

When the user attempts to submit the form, JavaScript prevents the default action.
It loops through all required fields and checks their validity.
For each invalid field, it adds its error message to an array and applies an error style to the field itself.
If there are any errors, the script dynamically builds an unordered list from the array of errors and displays it in a dedicated "summary box" at the top of the form. Each list item is a link that, when clicked, jumps the user's focus directly to the invalid input. The summary box is given role="alert" so screen readers will announce it automatically.

Features

Centralized Error Display: All errors are presented in one easy-to-read list.
Highly Accessible: The summary box with role="alert" immediately informs assistive technology users of what went wrong. The jump-links make navigation to errors trivial.
Improved User Experience: Eliminates the frustration of searching for an unseen error.
Dynamic & Reusable: The JavaScript automatically detects invalid fields and builds the summary, making it easy to adapt.

Dependencies

Uses pure HTML and CSS, with a self-contained JavaScript block for the validation logic.

Code

Here's the full code for the form with a validation summary:

<div class="summary-form-container">
    <form id="summaryForm" action="#" method="post" novalidate>
        
        
        <div class="error-summary" id="errorSummary" role="alert">
            <h3>Please correct the following errors:</h3>
            <ul id="errorList"></ul>
        </div>
        
        <div class="form-group">
            <label for="fullName">Full Name</label>
            
            <input type="text" id="fullName" name="fullName" required data-errormsg="Full Name cannot be blank.">
        </div>

<div class="form-group">
            <label for="userEmail">Email Address</label>
            <input type="email" id="userEmail" name="userEmail" required data-errormsg="Please enter a valid email address.">
        </div>
        
         <div class="form-group">
            <label for="userAge">Age (must be 18+)</label>
            <input type="number" id="userAge" name="userAge" required min="18" data-errormsg="You must be at least 18 years old.">
        </div>

<button type="submit" class="submit-btn">Register</button>
    </form>
</div>

if (summaryForm) {
    summaryForm.addEventListener('submit', (e) => {
        // Prevent submission first to run our checks
        e.preventDefault();
        
        // Reset from previous attempts
        errorList.innerHTML = '';
        errorSummaryBox.classList.remove('visible');
        inputs.forEach(input => input.classList.remove('input-error'));
        
        const errors = [];
        
        // Loop through inputs and check validity
        inputs.forEach(input => {
            if (!input.validity.valid) {
                // If invalid, add to our error list
                errors.push({
                    id: input.id,
                    message: input.dataset.errormsg || 'This field is invalid.'
                });
                // And highlight the field
                input.classList.add('input-error');
            }
        });
        
        // If there are errors, display them
        if (errors.length > 0) {
            errors.forEach(error => {
                const li = document.createElement('li');
                const link = document.createElement('a');
                link.href = `#${error.id}`;
                link.textContent = error.message;
                link.onclick = (event) => {
                    event.preventDefault();
                    document.getElementById(error.id).focus();
                };
                li.appendChild(link);
                errorList.appendChild(li);
            });
            
            errorSummaryBox.classList.add('visible');
            errorSummaryBox.focus(); // Important for accessibility!
        } else {
            // If no errors, the form is valid
            alert('Form is valid and would submit now!');
            // In a real application, you would remove the alert and uncomment the line below.
            // summaryForm.submit(); // Uncomment to allow submission
        }
    });
}
</script>

View Output