diff --git a/miniapp/assets/podbor.css b/miniapp/assets/podbor.css index 664a867..a4c99f0 100644 --- a/miniapp/assets/podbor.css +++ b/miniapp/assets/podbor.css @@ -148,6 +148,27 @@ margin: 0; } +/* ----- Form errors / hints ----- */ +.field-error { + font-family: var(--font-mono); + font-size: 11px; + letter-spacing: 0.02em; + color: #8A3E2A; + min-height: 14px; + margin-top: 4px; + line-height: 1.3; +} +.field-error:empty { display: none; } + +.field-hint { + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.04em; + color: var(--muted); + margin-top: 4px; + line-height: 1.3; +} + /* ----- Form basics ----- */ .field { display: flex; diff --git a/miniapp/assets/podbor.js b/miniapp/assets/podbor.js index 1d1d05a..b085f4d 100644 --- a/miniapp/assets/podbor.js +++ b/miniapp/assets/podbor.js @@ -178,22 +178,74 @@ const Podbor = (function () {
- +
`); bindInputs(node); - bindNav(node); + + const phoneInput = node.querySelector("input[data-bind='client_phone']"); + const phoneError = node.querySelector("#phoneError"); + const nameInput = node.querySelector("input[data-bind='client_name']"); + const nameError = node.querySelector("#nameError"); + + // Валидация на blur — мягкие подсказки + phoneInput.addEventListener("blur", () => { + const v = phoneInput.value.trim(); + if (v && !isValidPhone(v)) { + phoneError.textContent = "Похоже на неполный номер. Нужно 11 цифр (или 10 с цифры 9)"; + } else { + phoneError.textContent = ""; + } + }); + + node.querySelector("#introNext").addEventListener("click", () => { + // Имя + const name = (state.client_name || "").trim(); + if (!name) { + nameError.textContent = "Укажите имя клиента"; + nameInput.focus(); + haptic && haptic("warning"); + return; + } else { + nameError.textContent = ""; + } + + // Телефон + const phone = (state.client_phone || "").trim(); + if (!phone) { + phoneError.textContent = "Укажите телефон клиента"; + phoneInput.focus(); + haptic && haptic("warning"); + return; + } + if (!isValidPhone(phone)) { + phoneError.textContent = "Неверный формат. Пример: +7 900 123-45-67 или 89001234567"; + phoneInput.focus(); + haptic && haptic("warning"); + return; + } + // Нормализуем перед переходом + const normalized = normalizePhone(phone); + if (normalized !== phone) { + update({ client_phone: normalized }); + } + go("categories"); + }); + return node; } @@ -1539,6 +1591,15 @@ const Podbor = (function () { return `+7 ${d.slice(1, 4)} ${d.slice(4, 7)}-${d.slice(7, 9)}-${d.slice(9, 11)}`; } + /* Проверка: получится ли валидный РФ-номер из введённого. */ + function isValidPhone(raw) { + if (!raw) return false; + let d = raw.replace(/\D/g, ""); + if (d.length === 11 && d.startsWith("8")) d = "7" + d.slice(1); + if (d.length === 10 && d.startsWith("9")) d = "7" + d; + return d.length === 11 && d.startsWith("7"); + } + function bindNav(node) { node.querySelectorAll("[data-go]").forEach(b => { b.addEventListener("click", () => go(b.dataset.go)); diff --git a/miniapp/index.html b/miniapp/index.html index 23e3bb7..09c3e5f 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,8 +12,8 @@ - - + +
@@ -21,10 +21,10 @@
- - - - - + + + + + diff --git a/wb.json b/wb.json new file mode 100644 index 0000000..e69de29