Валідація номера телефону у формах Onepage (onepage.io) без SMS-підтвердження

Доброго дня.

З подібними задачами працював у Webflow, Tilda та інших конструкторах, де немає доступу до бекенду і все вирішується через client-side логіку. У вашому випадку я б робив рішення через libphonenumber у зв’язці з власною логікою перехоплення submit, а не через простий regex. Для ринку Німеччини це дасть набагато точнішу перевірку, особливо з різною довжиною номерів.
Можу реалізувати нормалізацію до E.164 перед відправкою форми та блокування submit із коректним повідомленням німецькою. Поле буде підсвічуватись, помилка зникатиме після виправлення. Якщо потрібно, додамо легку маску або intl-tel-input без конфліктів зі скриптами Onepage.
Стабільність забезпечимо через пошук елементів за типом поля та контекстом форми, а не за динамічними ID. За потреби використаємо MutationObserver, щоб скрипт коректно “підхоплював” форму навіть при асинхронному рендері.
Підкажіть, чи на сторінці одна форма, чи кілька, і чи є можливість вставити код глобально для всього сайту? Це вплине на спосіб прив’язки.

Вітаю! Зацікавив Ваш проєкт по валідації телефону у формах на Onepage.

Маю досвід інтеграції кастомного JavaScript у конструктори сайтів (перехоплення submit, робота з динамічним DOM, MutationObserver, кросбраузерність).

Пропоную рішення: Валідація через libphonenumber (для Німеччини), блокування відправки при некоректному номері, повідомлення німецькою та підсвітка поля, нормалізація номера у формат E.164 (+49…), фільтрація 0000000000;

Рішення буде працювати без SMS, стабільно на desktop і mobile, без конфліктів з іншими скриптами.

Готовий швидко реалізувати та надати інструкцію по впровадженню.

Готовий виконати.
Досвід роботи в Web Development більше 12+.
Приклади робіт https://koder.pp.ua/portfolio/

Доброго дня!
Мене звати Дмитро, компанія King Kong Web.

Ознайомився з вашим ТЗ по Onepage. Можемо зробити клієнтську валідацію номера телефону без SMS, щоб форма не відправлялась з “сміттєвими” номерами, а користувач одразу бачив помилку.

Реалізуємо це через вставку кастомного JavaScript у Onepage: підчепимось до submit події форми, перевіримо номер у 2 рівні (базова перевірка + правила для DE/+49), при помилці заблокуємо відправку та покажемо повідомлення німецькою. Також додамо підсвічування поля і при виправленні номеру помилка буде зникати.

По підходу: оптимально використати libphonenumber (через CDN), щоб коректно валідовати німецькі номери і, за потреби, нормалізувати їх у формат E.164 перед відправкою. Якщо Onepage не дасть стабільно підключити бібліотеку — зробимо надійний fallback на правила довжини/патернів (regex + логіка проти 0000/занадто коротко).

… Після виконання передамо готовий код для вставки, коротку інструкцію куди саме додати в Onepage, які селектори використовуємо і як перевірити роботу на desktop/mobile.

Готові приступити одразу. Якщо потрібно — надішліть посилання на сторінку з формою або скрін/HTML структури, щоб швидко підібрати найстабільніший спосіб підключення.

Доброго дня, Валерію.

Обираю libphonenumber замість regex.
Це забезпечить точну перевірку німецьких номерів (+49), нормалізацію до E.164 та блокування фейків.
Інтегрую через Custom Code, використовуючи MutationObserver для стабільності з динамічним DOM.

Користувачі побачать зрозумілі повідомлення про помилку німецькою мовою, а відправка блокуватиметься до виправлення даних.
Ви отримаєте готовий код та інструкцію, що гарантує чистоту бази без погіршення конверсії.

… Готовий надати повний код та інструкції для інтеграції в Onepage.

А ще, замість базової валідації, пропоную розширити функціонал до інтелектуальної маски введення номеру телефону (на основі intl-tel-input).
Це значно покращить UX, автоматично форматуючи номер під час введення та підсвічуючи правильний формат для Німеччини.
Також, можна додати автоматичне визначення країни за префіксом, що спростить введення для користувачів з інших країн у майбутньому.

Привіт,

Я можу реалізувати валідацію номерів телефонів для ваших форм Onepage. У мене є досвід роботи з валідацією на стороні клієнта за допомогою JavaScript, роботи з конструкторами форм та маніпуляцією з DOM для динамічних середовищ.

Я створю скрипт валідації, який блокує відправку недійсних німецьких номерів телефонів, таких як 0000000000, короткі номери та повторювані шаблони, валідує формати +49 та місцевий 0, використовуючи бібліотеку Google libphonenumber для точної валідації німецьких номерів, показує повідомлення про помилки німецькою мовою з червоною рамкою, нормалізує дійсні номери до формату E.164 перед відправкою та працює надійно в настільних та мобільних браузерах.

Щодо досвіду з Onepage.io, я не працював безпосередньо з Onepage.io, але маю досвід інтеграції кастомного JavaScript у платформи, такі як Webflow та Wix, де існують подібні виклики з динамічними ідентифікаторами та асинхронним завантаженням форм. Підхід подібний, використовуючи стабільні селектори, MutationObserver для асинхронного завантаження та делегування подій.

Для підходу я рекомендую використовувати libphonenumber через легку версію CDN, таку як google libphonenumber js. Це надійніше, ніж regex для німецьких номерів, які мають змінну довжину. Regex може працювати як резервний варіант, але не зловить всі крайні випадки.
…
Для нормалізації E.164 libphonenumber може нормалізувати дійсні номери до формату E.164 перед відправкою форми, що допомагає з узгодженістю даних CRM.

Для стабільності DOM я використаю кілька резервних селекторів, таких як тип вводу tel, текст підказки та текст мітки, і реалізую MutationObserver, щоб повторно прикріпити валідацію, якщо форма перезавантажується асинхронно. Я також протестую кілька форм на сторінці та націлюсь на правильну.

Я надам готовий до використання код JavaScript з посиланнями на бібліотеки CDN, інструкціями з інтеграції, документацією селекторів та необов'язковим CSS для стилізації помилок.

Термін: 1 тиждень
Вартість: 400 до 500 доларів США

Я готовий почати працювати негайно.

Юсеф

Показати оригінал

Перекласти

Привіт, напишіть в лс

Показати оригінал

Перекласти

Вітаю.Працюю з JavaScript понад 8+ років. Готовий налаштувати валідацію інпута.Звертайтесь.

Доброго дня! Я уважно вивчив ваш проект і готовий розпочати його реалізацію. Давайте обговоримо деталі для найкращого виконання.

Показати оригінал

Перекласти

Доброго дня. Подібні завдання робив, але не на onepage. Функція вставки свого коду доступна в платних версіях - тому щось перевірити не можу. Вийде чи ні, не скажу. Але досвід в цілому є і особисто мені потрібно розбиратися "на місці". Підходить - звертайтеся. Робив: Скрипт уніфікації мобільних номерів - є в портфоліо.

Показати оригінал

Перекласти

Привіт, Валерій Щербаков.
Я уважніше перевірив ваші вимоги.
Я можу повністю побудувати розділ, використовуючи бібліотеку (libphonenumber або іншу) та кілька власних функцій.
У цьому випадку мені не потрібно змінювати DOM для цього.
Я додам новий розділ (для помилки) лише.
Сподіваюся укласти контракт з вами.
Дякую.

Показати оригінал

Перекласти

Доброго вечора. Ваше завдання мені цілком зрозуміле. Я Знаю як вирішити вашу проблему, напишу весь потрібний функціонал з потрібною валідацією. Номери будуть коректні, все як ви хочете...

Зроблю доп перевірки, ви будете дуже задоволені результатом!!!

Чекаю на вас у персональних повідомленнях.

Готова виконати прямо зараз, віддам код через годину. Досвід більше 4х років

відповіді
1) Так. Підхід, який я використовую, є універсальним для будь-яких no-code конструкторів
2) Однозначно libphonenumber-js як основний підхід.
3) Так, це можливо
4) Каскад селекторів: скрипт шукає поле не по одному ID чи класу, а по ланцюжку з 7 селекторів (тип tel, атрибути name, placeholder). Навіть якщо Onepage змінить один — спрацює інший.


… p/s напишіть в лс, вже маю готове рішення

Доброго вечора, виконаю завдання за 1 годину, якщо цікавить, пишіть буду радий співпраці

upd: вже маю готовий код, тільки інтегруватись у вашу форму, потрібне посилання

Вітаю.

Готовий взятися. Пишіть, обговоримо.

1. Маю досвід з конструткорами.
2. Можна спробувати через regex.
3. Так.
4. Це питання потребує більш детальної відповіді.