Move Focus to the First Invalid Form Field
When a visitor submits a form with missing or invalid fields, moves keyboard focus to the first problem field and announces the browser's error message to screen readers.
Opens WPIDE on
Code
<div id="wpide-form-errors" role="alert" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);"></div>
<script>
(function () {
var region = document.getElementById('wpide-form-errors');
var handled = false;
document.addEventListener('invalid', function (event) {
var field = event.target;
if (handled) { return; }
handled = true;
setTimeout(function () { handled = false; }, 100);
var label = '';
if (field.labels && field.labels[0]) { label = field.labels[0].textContent.trim(); }
label = label || field.getAttribute('aria-label') || field.name || 'A field';
if (region) { region.textContent = label + ': ' + field.validationMessage; }
field.setAttribute('aria-invalid', 'true');
field.focus();
field.addEventListener('input', function () { if (field.checkValidity()) { field.removeAttribute('aria-invalid'); } }, { once: true });
}, true);
})();
</script>Notes
Uses the browser's built-in form validation, so it works with any form that uses required, type="email" and similar attributes.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.