diff --git a/src/registrar/assets/src/js/getgov/form-errors.js b/src/registrar/assets/src/js/getgov/form-errors.js new file mode 100644 index 000000000..e992d8eef --- /dev/null +++ b/src/registrar/assets/src/js/getgov/form-errors.js @@ -0,0 +1,19 @@ +export function initFormErrorHandling() { + document.addEventListener('DOMContentLoaded', function() { + const errorSummary = document.getElementById('form-errors'); + const firstErrorField = document.querySelector('.usa-input--error'); + if (firstErrorField) { + // Scroll to the first field in error + firstErrorField.scrollIntoView({ behavior: 'smooth', block: 'center' }); + + // Add focus to the first field in error + setTimeout(() => { + firstErrorField.focus(); + }, 50); + } else if (errorSummary) { + // Focus on the error summary for screen reader users + errorSummary.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + + }); +} \ No newline at end of file diff --git a/src/registrar/assets/src/js/getgov/main.js b/src/registrar/assets/src/js/getgov/main.js index c351454d0..6ff402aa4 100644 --- a/src/registrar/assets/src/js/getgov/main.js +++ b/src/registrar/assets/src/js/getgov/main.js @@ -15,6 +15,7 @@ import { initDomainRequestForm } from './domain-request-form.js'; import { initDomainManagersPage } from './domain-managers.js'; import { initDomainDSData } from './domain-dsdata.js'; import { initDomainDNSSEC } from './domain-dnssec.js'; +import { initFormErrorHandling } from './form-errors.js'; initDomainValidators(); @@ -45,8 +46,9 @@ initDomainManagersPage(); initDomainDSData(); initDomainDNSSEC(); +initFormErrorHandling(); + // Init the portfolio new member page initPortfolioMemberPageRadio(); initPortfolioNewMemberPageToggle(); initAddNewMemberPageListeners(); -//ignore, testing why test fails in pipeline diff --git a/src/registrar/templates/includes/form_errors.html b/src/registrar/templates/includes/form_errors.html index dbbecae36..52c82aaf0 100644 --- a/src/registrar/templates/includes/form_errors.html +++ b/src/registrar/templates/includes/form_errors.html @@ -1,6 +1,7 @@ {% if form.errors %} +
{% for error in form.non_field_errors %} -
+
{% endfor %} -{% endfor %} + {% endfor %} +
{% endif %}