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

Sparky · Accepted Answer · 2020-04-24T15:18:26.373

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.

thank you so much for such scientific answer ,I always respect experts with solid theory background (not try and trail). — Suhayb, Aug 18 '16 at 11:21
there is a problem for phone field that it's actually an array of inputs( phone[ ] ) which may affect jquery validation since jquery validation can deal with only one field for each rule ,thus i decided to make a manual validation away from jq validation by adding class errors and spans manually the problem is how to block the form to submit if the validated field form-group has error ? — Suhayb, Aug 18 '16 at 11:25
@SuhaybKharabsheh, I fully answered your question about the jQuery Validate plugin. If you decided to take another approach and encounter a new problem, then please post it as a new question. — Sparky, Aug 18 '16 at 14:50
@NarenVerma, ok thanks. I fixed the answer. `phone_number` should have been the name of the value argument going into the function. Copied from the plugin's additional methods file. — Sparky, Apr 24 '20 at 15:19

Validating International Telephone Input using jquery validation

1 Answers1