ux: pulse error border on repeated validation failures

This commit is contained in:
Ulas Kalayci
2026-04-30 09:13:06 +02:00
parent d720772939
commit e10516d32f
3 changed files with 38 additions and 0 deletions
+14
View File
@@ -608,6 +608,20 @@ function _validateField(input) {
group?.classList.toggle('form-field--error', !hasValue);
group?.classList.toggle('form-field--valid', hasValue);
input.setAttribute('aria-invalid', String(!hasValue));
if (!hasValue && group) {
const count = parseInt(group.dataset.errorCount ?? '0', 10) + 1;
group.dataset.errorCount = String(count);
if (count >= 2) {
group.classList.remove('form-field--error-repeat');
void group.offsetWidth;
group.classList.add('form-field--error-repeat');
group.addEventListener('animationend', () => group.classList.remove('form-field--error-repeat'), { once: true });
}
} else if (hasValue && group) {
group.dataset.errorCount = '0';
}
return hasValue;
}