Validation no working with INTL-TEL-INPUT

Question

I'm trying to use intl-tel-input... https://github.com/Bluefieldscom/intl-tel-input#utilities-script

I've included the css at the top of the sheet

<link rel="stylesheet" href="css/intlTelInput.css">

My form in the middle with "tel" id... I am also using parsley to validate parts of the form, and that is working fine,

<input class="form-control input-sm"  id="tel" name="tel" type="tel" data-parsley-required>

and at the bottom of my page i included the jquery, bootstrap, etc... and intl-tel-input js....

 <script src="js/jquery.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/parsley.js"></script>
 <script src="js/intlTelInput.min.js"></script>

And then i initialize the utility...

$("#tel").intlTelInput({
            utilsScript: "js/utils.js"
});

The form element picks up the country flags, so the plug in appears to be working, but no validation is occurring. The utils.js file is the "compiled" version of the file, which i believe is the correct one to use - but i've tried both the compiled and non compiled version.

What am i missing here? why isn't the validation and formatting working?

thanks.

Answer 1

For working validation you need call utils.js validation functions See below example

$("#tel").change(function()
{
  var telInput = $("#tel");
  if ($.trim(telInput.val())) 
  {
    if (telInput.intlTelInput("isValidNumber")) 
    {
      console.log(telInput.intlTelInput("getNumber"));
      alert('Valid' );
    }
    else 
    {
      console.log(telInput.intlTelInput("getValidationError"));
      alert('invalid');
    }
  }
});