openclaw/oikos
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

ux: pulse error border on repeated validation failures

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/components/modal.js
+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;
}
public/styles/layout.css
+16
View File
@@ -1388,6 +1388,22 @@ html.fab-anim-done .page-fab {
display: flex;
}
/* Pulse-Animation bei wiederholtem Fehler */
@keyframes field-error-pulse {
0%, 100% { box-shadow: none; }
40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 35%, transparent); }
}
.form-field--error-repeat .input,
.form-field--error-repeat .form-input {
animation: field-error-pulse 500ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.form-field--error-repeat .input,
.form-field--error-repeat .form-input { animation: none; }
}
/* --------------------------------------------------------
* Toggle-Switch
* Custom iOS-style toggle, ersetzt native Checkboxen.