Validate all modal fields at once with per-field highlighting

This commit is contained in:
2026-05-14 06:34:29 +00:00
parent eb05bcac53
commit ba8f3cf753
2 changed files with 34 additions and 13 deletions
+7
View File
@@ -1516,3 +1516,10 @@ button {
opacity: 0.55;
cursor: default;
}
/* Invalid field highlight in access modal */
.access-field input.am-invalid {
border-color: rgba(220, 70, 70, 0.7) !important;
box-shadow: 0 0 0 3px rgba(220, 70, 70, 0.15) !important;
background: rgba(220, 70, 70, 0.05) !important;
}
+25 -11
View File
@@ -140,6 +140,7 @@
overlay.style.display = 'none';
document.body.style.overflow = '';
errEl.style.display = 'none';
document.querySelectorAll('.am-invalid').forEach(el => el.classList.remove('am-invalid'));
}
async function loadProducts() {
@@ -177,18 +178,26 @@
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const phoneRe = /^[\+\d][\d\s\-\(\)]{6,18}$/;
if (!name || !company || !email || !phone) {
errEl.textContent = 'Пожалуйста, заполните все обязательные поля';
errEl.style.display = 'block';
return;
const fields = [
{ el: document.getElementById('am-name'), val: name, check: () => !!name, msg: 'Введите имя и фамилию' },
{ el: document.getElementById('am-company'), val: company, check: () => !!company, msg: 'Введите название компании' },
{ el: document.getElementById('am-email'), val: email, check: () => emailRe.test(email), msg: 'Введите корректный email' },
{ el: document.getElementById('am-phone'), val: phone, check: () => phoneRe.test(phone), msg: 'Введите корректный номер телефона' },
];
const errors = [];
fields.forEach(f => {
if (!f.check()) {
f.el.classList.add('am-invalid');
errors.push(f.msg);
} else {
f.el.classList.remove('am-invalid');
}
if (!emailRe.test(email)) {
errEl.textContent = 'Введите корректный email';
errEl.style.display = 'block';
return;
}
if (!phoneRe.test(phone)) {
errEl.textContent = 'Введите корректный номер телефона';
});
if (errors.length) {
errEl.textContent = errors.join(' • ');
errEl.style.display = 'block';
return;
}
@@ -217,6 +226,11 @@
}
}
// Clear invalid highlight on input
document.querySelectorAll('#am-name,#am-company,#am-email,#am-phone').forEach(el => {
el.addEventListener('input', () => el.classList.remove('am-invalid'));
});
// Wire up request-access button
document.querySelectorAll('.login-request-btn, [data-open-access-modal]').forEach(el => {
el.addEventListener('click', function(e) {