416просмотров
10 февраля 2026 г.
questionScore: 458
Як зменшити кількість трешу і не придумувати велосипед? Перебираючи ленди зі спая, помітив що овер дохуя людей ігнорують валідацію на формі, або ліплять костилі, які живуть до першого апдейта.
Думав що вже всі знають про intl-tel-input 🤷♂️ ✔️ Авто GEO
✔️ Адекватна валідація
✔️ Один плагін замість if-else-if-else і regex на 100500 символів Тому тримай короткий мануальчик, як його використовувати: 1. Підключи CDN (CSS в <head>, JS перед </body>)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18/build/css/intlTelInput.css">
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18/build/js/intlTelInput.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18/build/js/utils.js"></script> 2. Додай форму
<form id="lead-form" action="thank-you.html" method="GET"> <input type="tel" id="phone" name="phone" placeholder="+48 123 456 789"> <button type="submit">Відправити</button>
</form> 3. Ініціалізація (нижче CDN-скриптів, перед </body>)
<script>
const phoneInput = document.querySelector("#phone"); const iti = window.intlTelInput(phoneInput, { initialCountry: "auto", separateDialCode: true, geoIpLookup: cb => { fetch("https://ipapi.co/json") .then(r => r.json()) .then(d => cb((d && d.country_code) ? d.country_code.toLowerCase() : "pl")) .catch(() => cb("pl")); }, utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18/build/js/utils.js",
});
</script> 4. Перевірка (нижче ініціалізації, теж перед </body>)
<script>
const form = document.querySelector("#lead-form"); form.addEventListener("submit", (e) => { if (!iti.isValidNumber()) { e.preventDefault(); alert("Spierdalaj do Polski"); phoneInput.classList.add("input-error"); return; } phoneInput.value = iti.getNumber(); // E.164, тільки так
});
</script> Звісно це базова варіація, яку можна модифікувати під себе. Але навіть так працювати буде краще ніж те, що я бачу на лендах. Якщо було корисно — дай реакцію на пост 🤝