Validating International Telephone Input using jquery validation

Question

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

Answer 1

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.