jquery 未捕获的类型错误:$field.intlTelInput不是函数

x6492ojm  于 2023-06-22  发布在  jQuery
关注(0)|答案(2)|浏览(160)

我试图实现Intl-tel-input jQuery插件,用于在提交HTML表单时验证不同国家的国际移动的号码。这里我使用的是jQuery版本2.2.4和Intl-tel-input jQuery插件版本17.0.0。当我尝试提交表单时,得到一个未捕获的TypeError。下面是我的表单验证脚本

$(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();
    }
});

控制台上显示的错误消息为

Uncaught TypeError: $field.intlTelInput is not a function

谁能帮我解决一下?

oxiaedzo

oxiaedzo1#

答案来的很晚,就在我经历了同样的事情之后。根据https://github.com/jackocnr/intl-tel-input/issues/774

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

对于旧版本的Jquery和intelInput,请用途:

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

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

对于新版本,请用途:

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

ccrfmcuu2#

确保导入jQueryintlTelInput JavaScript文件。* * 确保将jQuery脚本放在intlTelInput脚本之前(如上)。当然,不要忘记导入intlTelInput样式文件**。这应该可以正常工作:

<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>

相关问题