Form with Validation Summary

<!DOCTYPE html>
<title>My Example</title>

<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>