JSFiddle - React, Tailwind, and code Playground

by yiiBoy

HTML

<div class="">
  <label>Mobile!</label>
  <div class="form-group has-feedback">
    <div class="input-group">
      <span class="input-group-addon"><i class="glyphicon glyphicon-phone"></i></span>

      <input id="mobile" name="mobile" class="form-control" type="text" value="+380"></div>
    <span class="glyphicon form-control-feedback"></span>
  </div>
</div>
</div>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.2/css/intlTelInput.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.2/js/intlTelInput.js"></script>

CSS

.intl-tel-input .selected-flag {
  z-index: 5 !important;
}

.intl-tel-input {
  display: block !important;
}

.intl-tel-input .flag-container {
  top: 16px !important;
}

.intl-tel-input .country-list {
  top: 18px;
}

JavaScript

var input = document.querySelector('#mobile');
	var iti = window.intlTelInput(input, {
	  'defaultCountry': 'auto',
	  'numberType': 'MOBILE',
	  'preferredCountries': ['br'],
	  'responsiveDropdown': true,
	  'utilsScript': 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.2/js/utils.js'
	});

	jQuery('#mobile').change(function() {
	  // jQuery('#mobile').val(jQuery(this).val());
	  console.log(iti.getNumber(), iti.isValidNumber());
	  if (iti.isValidNumber()) {
	    var num = iti.getNumber();
	    console.log(num, this.value);
	    if (num != this.value) {
	      this.value = num;
	    }
	    $(this).parents('.has-feedback')
	      .addClass('has-success')
	      .removeClass('has-error')
	      .find('.form-control-feedback')
	      .addClass('glyphicon-ok')
	      .removeClass('glyphicon-remove');
	  } else {
	    $(this).parents('.has-feedback')
	      .addClass('has-error')
	      .removeClass('has-success')
	      .find('.form-control-feedback')
	      .addClass('glyphicon-remove')
	      .removeClass('glyphicon-ok');
	    console.log('show error');
	  }
	});