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?
Make sure you import the
jQueryandintlTelInputJavaScript 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: