Phone Number Validation

Phone Number Validation using jQuery

by John Kiran

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.caret/0.1/jquery.caret.js"></script>
<script src="https://www.solodev.com/assets/phone/jquery.mobilePhoneNumber.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<div class="container">
<div class="well">
   <div class="row">
      <div class="col-md-1">
         <p>Country:</p>
         <div class="country"></div>
      </div>
      <div class="col-md-3">
         <input type="tel" class="tel form-control" pattern="\d*" x-autocompletetype="tel" placeholder="Mobile Phone Number" autofocus>
      </div>
      <div class="col-md-8">
      </div>
   </div>
   </div>
</div>

CSS

input, div {
    font-size: 28px;
    font-family: 'Open Sans Condensed', sans-serif;
  }
.country {
    font-family: 'Open Sans Condensed', sans-serif;
  }
.well {
  margin-top: 24px;
}
p {
  font-size: 22px;
}

JavaScript

$(document).ready(function() {
jQuery(function($){
      var input = $('[type=tel]')
      input.mobilePhoneNumber({allowPhoneWithoutPrefix: '+1'});
      input.bind('country.mobilePhoneNumber', function(e, country) {
        $('.country').text(country || '')
      })
	 });
});