International Telephone Validation - Jquery

How to validate international telephone Input box Using jquery code?

Snippet Code


  
Rate this page :
  [ 0 votes]

This jquery validation code allows you to enter and check the international telephone numbers. Some advanced features of intl-tel-input is listed below
1)All countries telephone code are shown with their flag as a drop list.
2)The code displays up-to-date pattern of phone numbers in the world.
3)The data obtain from Google libphone number library so it is completely reliable.
4)It lists all the countries and their international dial codes next to their flags.
The jquery code given below is used to validate telephone numbers.

<form id="contactForm" class="form-horizontal"> <div class="form-group"> <label class="col-xs-3 control-label">Phone number</label> <div class="col-xs-5"> <input type="tel" class="form-control" name="phoneNumber" /> </div> </div> </form> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script> <script src='http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js'></script> <script src='http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js'></script> <link rel="stylesheet" href="http://formvalidation.io/vendor/intl-tel-input/build/css/intlTelInput.css" /> <script src="http://formvalidation.io/vendor/intl-tel-input/build/js/intlTelInput.min.js"></script> <script> $(document).ready(function() { $('#contactForm') .find('[name="phoneNumber"]') .intlTelInput({ utilsScript: 'http://formvalidation.io/vendor/intl-tel-input/lib/libphonenumber/build/utils.js', autoPlaceholder: true, preferredCountries: ['fr', 'us', 'gb'] }); $('#contactForm') .formValidation({ framework: 'bootstrap', icon: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { phoneNumber: { validators: { callback: { message: 'The phone number is not valid', callback: function(value, validator, $field) { return value === '' || $field.intlTelInput('isValidNumber'); } } } } } }) // Revalidate the number when changing the country .on('click', '.country-list', function() { $('#contactForm').formValidation('revalidateField', 'phoneNumber'); }); }); </script>

Tags


Ask Questions

Ask Question