Uncaught TypeError: $field.intlTelInput is not a function

Question

I am trying to implement the Intl-tel-input jQuery plugin for validating international mobile numbers in different countries when submitting my html form. Here I am using jQuery version 2.2.4 and Intl-tel-input jQuery plugin version 17.0.0. When I try to submit my form, then getting an Uncaught TypeError. Here is my form validation script

$(document).on('click', '#saveContact' ,function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    $('#contactsFrm').bootstrapValidator({
        message: 'This value is not valid',
        excluded: ':disabled',
        fields: {
            firstName: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your first name'
                    },
                    stringLength: {
                    min: 1,
                    max: 30,
                    message: 'First name should be in between 1 - 30 Characters'
                }
                }
            },
            lastName: {
                validators: {
                    notEmpty: {
                        message: 'Please enter your lastname'
                    },
                    stringLength: {
                    min: 1,
                    max: 30,
                    message: 'Last name should be in between 1 - 30 Characters'
                }
                }
            },  
            
            username: {
                message: 'Please enter a valid Username',
                validators: {
                    notEmpty: {
                        message: 'Username is required and cannot be empty'
                    },
                    regexp: {
                        regexp: /^[0-9a-zA-Z](?!(?:.*?[._]){2})[._a-zA-Z0-9]{6,18}[0-9a-zA-Z]$/,
                        message: 'Username should be between 8 - 20 characters, cannot contain blank spaces, or special characters, can contain only one _ or . but not in the beginning or at last'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Email address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'Please enter a valid Email Address'
                    }
                }
            },
                
            phone1: {
                message: 'Please enter a valid phone number',
                validators: {
                    callback:
                    {
                       message: 'The phone number is not valid',
                        callback: function(value, validator, $field) 
                        {
                            if(value = '')
                            {
                             return true;
                            }
                            if($field.intlTelInput('isValidNumber'))
                            {
                                return true;
                            }
                            else
                            {
                            return false;
                            }
                            
                        }
                    }
                }
                }
    }
    
    }).on('success.field.bv', function(e, data) {
        var $parent = data.element.parents('.form-group');
        $parent.removeClass('has-success');
    });
    if(!($('#contactsFrm').parent().find('.has-error').length))
    {
        $('#contactsFrm').submit();
    }
});

The error message showing on the console is

Uncaught TypeError: $field.intlTelInput is not a function

Could anyone please help me to resolve it?

Answer 1

Answer is coming late, just after i had experienced same. According to https://github.com/jackocnr/intl-tel-input/issues/774

First make sure Jquery is loaded above the intelInput js build file.

For Older Version of Jquery and intelInput use:

// input id name
var inputJquery = "#telephone";

$(inputJquery).intlTelInput({
    formatOnDisplay: false,
    nationalMode: false,
    autoPlaceholder: 'aggressive',
    separateDialCode: true,
    preferredCountries: ['BE', 'GB'],
});

For new version please use:

var input = document.querySelector("#input-phone");
window.intlTelInput(input, {
   formatOnDisplay: false,
   nationalMode: false,
   autoPlaceholder: 'aggressive',
   separateDialCode: true,
   preferredCountries: ['BE', 'GB'],
});

Answer 2

Make sure you import the jQuery and intlTelInput JavaScript files. Be sure to place the jQuery script before the intlTelInput script (above). Of course, don't forget to import the intlTelInput style file. This should work fine:

<head>
    <!-- ... -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput-jquery.min.js"></script>
    <!-- ... -->
</head>
<!-- ... -->
<form>
    <input type="tel" id="phone" placeholder="Phone">
</form>
<!-- ... -->
<script>
    $(document).ready(function(){
        $("#phone").intlTelInput({
            initialCountry: "us",
            separateDialCode: true,
        });
    });
</script>