我试图实现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
谁能帮我解决一下?
2条答案
按热度按时间oxiaedzo1#
答案来的很晚,就在我经历了同样的事情之后。根据https://github.com/jackocnr/intl-tel-input/issues/774
对于旧版本的Jquery和intelInput,请用途:
对于新版本,请用途:
ccrfmcuu2#
确保导入
jQuery
和intlTelInput
JavaScript文件。* * 确保将jQuery脚本放在intlTelInput脚本之前(如上)。当然,不要忘记导入intlTelInput样式文件**。这应该可以正常工作: