Integration with intl-tel-input

[mohdaimash]

Hi, First of all, thanks for the amazing and easy to use plugin.

I have been successfully able to integrate the validator plugin with intl-tel-input (https://github.com/jackocnr/intl-tel-input) using the following code:

            telNum = $("#phone_number");
            telNum.intlTelInput({
                initialCountry: "auto",
                geoIpLookup: function(callback) {
                    $.get('http://ipinfo.io', function() {}, "jsonp").always(function(resp) {
                        var countryCode = (resp && resp.country) ? resp.country : "";
                        callback(countryCode);
                    });
                },
                utilsScript: "js/utils.js",
                nationalMode: true,
                autoPlaceholder: "aggressive",
                placeholderNumberType: "MOBILE",
                customPlaceholder: function(selectedCountryPlaceholder) {
                    return "Mobile Number e.g. " + selectedCountryPlaceholder;
                },
                preferredCountries: ['au', 'us', 'gb']
            });
                $("#form").validator({
                    custom: {
                        mobile: function($el){
                            return isValidNumber("#phone_number");
                        }
                    },
                    errors: {
                        mobile: "Please provide a valid mobile number."
                    }
                }).on('submit', function(e){
                    $("#phone_number").val($("#phone_number").intlTelInput("getNumber"));
                });

        function isValidNumber(num){
           telNum = $(num);
               if(telNum.intlTelInput('isValidNumber') && telNum.intlTelInput('getNumberType') == (intlTelInputUtils.numberType.MOBILE || intlTelInputUtils.numberType.FIXED_LINE_OR_MOBILE)){
                    return false;
               } else {
                   return "Please provide a valid mobile number.";
               }
        }

Where as the code is working perfectly on page, however when its been brought back because of any server side validation error, the phone number field is gives validation error even though the number is correct. A click on the phone number field fixes the issue, is there any way to fix this issue on initialization?

Second I have another question, for data-remote validation I want to perform an function during the time when it is VALIDATING. is there any event in the plugin that can help with that?

[orlop]

mohdaimash, thank you for the code, I utilized it in my aplication and it helped me (and forced me :) to understand some principles I'd otherwise never worry about :)

If you haven't solved your issue yet, I suppose that the problem happens because the validator calls the "isValidNumber" function before the utils.js script is fully loaded. So using jQuery, my solution was to enclose the initialization of the intTelInput function to $(document).ready AND enclose the custom validator into $(window).load() (since it has to wait for all instances of $(document).ready to complete). And it works fine for me, no more errors on page load: (I did some other minor customisation changes to your code, which shouldn't affect this issue)

telNum = $(".phone");

$(document).ready(function() {
    telNum.intlTelInput({
    initialCountry: "cz",
    utilsScript: "<?php echo htmlspecialchars(SCRIPT_ROOT); ?>assets/js/utils.js",
    nationalMode: true,
    autoPlaceholder: true,
    placeholderNumberType: "MOBILE",
    customPlaceholder: '',
    preferredCountries: ['cz', 'us', 'gb']
    })
});

$(window).on("load",function() {
    $("#validated-form").validator({
    custom: {
        phone: function($el){
        return isValidNumber($el);
      }
    }
  }).on('submit', function(e){
    $(telNum).val($(telNum).intlTelInput("getNumber"));
  });
});

function isValidNumber(num){
    telNum = $(num);
  if(telNum.intlTelInput('isValidNumber')){
    return false;
  } else {
    return "Vepište prosím validní telefonní číslo dle předepsaného formátu.";
  }
}