International tel input in laravel 8

Question

I'm using this code to validate the phone number ; I'm using the Intl-tel-input jQuery plugin for entering and validating international telephone numbers

   <link rel="stylesheet" href="/build/css/intlTelInput.css" />
<script src="build/js/intlTelInput.js"></script>
<script src="build/js/utils.js"></script>
<form id="contactForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Phone number</label>
        <div class="col-xs-5">
            <input type="tel" class="form-control" name="phoneNumber" />
        </div>
    </div>
</form>
  <script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="build/js/intlTelInput.min.js"></script>
<script>
$(document).ready(function() {
    
    $('#contactForm')
        .find('[name="phoneNumber"]')
            .intlTelInput({
                utilsScript: 'build/js/utils.js',
                autoPlaceholder: true,
                preferredCountries: ['fr', 'us', 'gb']
            });

    $('#contactForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                phoneNumber: {
                    validators: {
                        callback: {
                            callback: function(value, validator, $field) {
                                var isValid = value === '' || $field.intlTelInput('isValidNumber'),
                                    err     = $field.intlTelInput('getValidationError'),
                                    message = null;
                                switch (err) {
                                    case intlTelInputUtils.validationError.INVALID_COUNTRY_CODE:
                                        message = 'The country code is not valid';
                                        break;

                                    case intlTelInputUtils.validationError.TOO_SHORT:
                                        message = 'The phone number is too short';
                                        break;

                                    case intlTelInputUtils.validationError.TOO_LONG:
                                        message = 'The phone number is too long';
                                        break;

                                    case intlTelInputUtils.validationError.NOT_A_NUMBER:
                                        message = 'The value is not a number';
                                        break;

                                    default:
                                        message = 'The phone number is not valid';
                                        break;
                                }

                                return {
                                    valid: isValid,
                                    message: message
                                };
                            }
                        }
                    }
                }
            }
        })
        // Revalidate the number when changing the country
        .on('click', '.country-list', function() {
            $('#contactForm').formValidation('revalidateField', 'phoneNumber');
        });
});
</script>

But I ger this error :

Uncaught TypeError: $(...).find(...).intlTelInput is not a function

I don't know what is the problem, I have had this error quite a few times and am not sure how to handle it. Any help would be greatly appreciated. thanks in advance

Answer 1

Basically the error is informing you that a function is being called on a object type that the function has not been declared on.

The intlTelInput plugin registers itself with the window object and so you need to call the function on the window object passing it the element you want to work with.

window.intlTelInput($('#contactForm').find('[name="phoneNumber"]')[0], {
  utilsScript: 'build/js/utils.js',
  autoPlaceholder: true,
  preferredCountries: ['fr', 'us', 'gb']
});

Note that .find() returns an array of elements it finds so you need to specify the first index, alternatively just use vanilla JS.

window.intlTelInput(document.querySelector('#phoneNumber'), {
  utilsScript: 'build/js/utils.js',
  autoPlaceholder: true,
  preferredCountries: ['fr', 'us', 'gb']
});

Check out a working fiddle.