intl-tel-input.html

intl-tel-input.html

    <input type='text' class="mobile-number" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/css/intlTelInput.css"
          integrity="sha256-rTKxJIIHupH7lFo30458ner8uoSSRYciA0gttCkw1JE=" crossorigin="anonymous"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/js/utils.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/js/intlTelInput.js"></script>
    <style>
        .iti__flag {
            background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/img/flags.png");
        }

        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            .iti__flag {
                background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/img/[email protected]");
            }
        }
    </style>
    <script type="text/javascript">
        let jq_iti = false;
        let selector = ".mobile-number";
        let options = {
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.2/js/utils.js",
            hiddenInput: "mobile",
            initialCountry: "IN",
            preferredCountries: ["in", "qa", "ae", 'ua', ],
            separateDialCode: true,
    };

    (function() {
        let inputs = document.querySelectorAll(selector);
        inputs.forEach(function(input){
            input.value = "{{ form.mobile.value  | default_if_none:form.mobile_number.value }}";
            window.ITI = intlTelInput(input, options);
            var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
            let change_cb = function (event) {event.target.value = window.ITI.getNumber(intlTelInputUtils.numberFormat.E164)};
            var reset = function () {
                let $elParent = $(input).parentsUntil('.row').find('.form-group.label-floating');
                $elParent.removeClass('has-danger');
                $elParent.addClass('has-success');
                $elParent.find('.form-control-feedback .material-icons').text('done');
                $elParent.find('.helptext').html("");
            };
            var raise_error = function () {
                console.log("error");
                let $elParent = $(input).parentsUntil('.row').find('.form-group.label-floating');
                $elParent.addClass('has-danger');
                $elParent.find('.form-control-feedback > .material-icons').text('close');
                var errorCode = window.ITI.getValidationError();
                $elParent.find('.helptext').html(errorMap[errorCode]);
            };
            let blur_cb = function(event=null) {
                if (input.value.trim()) {
                    ((window.ITI.isValidNumber())?reset:raise_error)();
                }
            };
            // on blur: validate
            blur_cb();
            $(input).on('blur', blur_cb);
            // on keyup / change flag: reset
            $(input).on('change', change_cb);
            {#$(input).on('change', reset);#}
        });
    })();
    </script>