Dropdown phonepicker with intl support + IP geolocalization

gistfile1.txt

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>

<script>
    const phoneInputField = document.querySelector("#phone");
    const form = document.querySelector("#form");
    const errorMessage = document.querySelector("#client-phone-validation");

    const phoneInput = window.intlTelInput(phoneInputField, {
        utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js",
        initialCountry: "auto",
        hiddenInput: "phoneNumber",
        geoIpLookup: callback => {
            fetch("https://ipapi.co/json")
                .then(res => res.json())
                .then(data => callback(data.country_code))
                .catch(() => callback("us"));
        },
        preferredCountries: ['es']
    });

    form.onsubmit = () => {
        if (!phoneInput.isValidNumber()) {
            errorMessage.classList.remove('hidden');
            return false;
        }
    };
</script>