diff --git a/app/static/style.css b/app/static/style.css index 64c1d14..f0a0ad0 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -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; +} diff --git a/app/templates/login.html b/app/templates/login.html index b8a61c7..9d4798c 100644 --- a/app/templates/login.html +++ b/app/templates/login.html @@ -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,23 +178,31 @@ const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const phoneRe = /^[\+\d][\d\s\-\(\)]{6,18}$/; - if (!name || !company || !email || !phone) { - errEl.textContent = 'Пожалуйста, заполните все обязательные поля'; - errEl.style.display = 'block'; - return; - } - if (!emailRe.test(email)) { - errEl.textContent = 'Введите корректный email'; - errEl.style.display = 'block'; - return; - } - if (!phoneRe.test(phone)) { - errEl.textContent = 'Введите корректный номер телефона'; + + 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 (errors.length) { + errEl.textContent = errors.join(' • '); errEl.style.display = 'block'; return; } - btnSubmit.disabled = true; + btnSubmit.disabled = true; btnSubmit.textContent = 'Отправка...'; errEl.style.display = 'none'; @@ -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) {