Geeks!
We all know that awesome plugin called International Telephone Input,is there a way to tie it's own Validation method intlTelInput("isValidNumber")
into jquery validation ?
intlTelInput("isValidNumber")
returns true if true or false if false
There is more details yet to come below!:
var handleContactFormValidation = function () {
var value_form = $('#contact_form');//form i would like to validate where phone field is in!
var value_error = $('.alert-danger', value_form);
var value_success = $('.alert-success', value_form);
value_form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
phone: {
required: {
depends: function () {
if ($(this).intlTelInput("isValidNumber") == true)
return true
else
return false
}
}
},
},
Now depending on the results "isValidNumber" method is returning i need to pass that validating Output {true,false} to the jquery validation but above is not functioning
This validation logic makes no sense...
rules: {
phone: {
required: {
depends: function () {
if ($(this).intlTelInput("isValidNumber") == true)
return true
else
return false
}
}
},
},
The way you've written it, the depends
property is saying that the phone
field is required
when the telephone number is valid and the field is not required
when the telephone number is invalid. To make this determination, the field has to be filled out. But if the field is already filled out, then the required
rule no longer matters. So when it's simply left blank (no valid phone number), it's not required
and nothing will be validated.
If you want to validate the phone number with the International Telephone Input plugin, then you'll need to write a custom rule using the .addMethod()
method that calls this external .intlTelInput()
method.
$('#myform').validate({
.....
rules: {
phone: {
required: true, // field is mandatory
intlTelNumber: true // must contain a valid phone number
},
},
....
});
// create a custom phone number rule called 'intlTelNumber'
jQuery.validator.addMethod("intlTelNumber", function(value, element) {
return this.optional(element) || $(element).intlTelInput("isValidNumber");
}, "Please enter a valid International Phone Number");
To do this without using the International Telephone Input plugin...
jQuery.validator.addMethod("intlTelNumber", function(phone_number, element) {
phone_number = phone_number.replace( /\s+/g, "" );
return this.optional( element ) || phone_number.length > 9 &&
phone_number.match( /^(\+?1-?)?(\([2-9]([02-9]\d|1[02-9])\)|[2-9]([02-9]\d|1[02-9]))-?[2-9]([02-9]\d|1[02-9])-?\d{4}$/ );
}, "Please enter a valid International Phone Number");
This example shows the regex for a US phone number. Modify it to suit your specific phone number requirements. Hint: look inside your International Telephone Input plugin for the correct regex.