Validate all modal fields at once with per-field highlighting

2026-05-14 06:34:29 +00:00
parent eb05bcac53
commit ba8f3cf753
2 changed files with 34 additions and 13 deletions
@@ -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) {