Phone Number Validation

Phone Number Validation using jQuery

by Yolanda Robles

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" maxlength="8" autofocus>
      </div>
      <div class="col-md-8">
      </div>
   </div>
   </div>
</div>

<input type="button" value="Validar Teléfono Internacional" onclick="eventoClick" class="boton">
<div class="validacion"></div>

<div class="ejemplos">
<p>reino unido: +448888884532</p>
<p>
rusia: +74957373007
</p>
<p>
suecia: +4647681000
</p>
<p>
quebec: +18668664532
</p>
</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;
}

.boton{
  margin-left: 75px;
}

.validacion{
  color: red;
  margin-left: 75px;
  margin-top: 10px;
}

.ejemplos{
  margin-top: 40px;
  margin-left: 75px;
  
}

JavaScript

$(document).ready(function() {

	/*var PHONE_REGEXP = /^(\+|00)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{1,14}$/;*/
  
  var PHONE_REGEXP = /((?:\+|00)[17](?: |\-)?|(?:\+|00)[1-9]\d{0,2}(?: |\-)?|(?:\+|00)1\-\d{3}(?: |\-)?)?(0\d|\([0-9]{3}\)|[1-9]{0,3})(?:((?: |\-)[0-9]{2}){4}|((?:[0-9]{2}){4})|((?: |\-)[0-9]{3}(?: |\-)[0-9]{4})|([0-9]{7}))/g;
	
  jQuery(function($){
      var input = $('[type=tel]');
      input.mobilePhoneNumber({allowPhoneWithoutPrefix: '+'});
      input.bind('country.mobilePhoneNumber', function(e, country) {
        $('.country').text(country || '');
      })
	 });
   
   
  $('.boton').click(function() {

     var input = $('[type=tel]');
     var valor = input.mobilePhoneNumber('val');
     //alert(valor);
     alert('cumplimentado: ' + input.mobilePhoneNumber('validate'));

		 // testeamos con la expresión regular
     /*if(PHONE_REGEXP.test(valor)) {
     	  //alert('correcto');
        $('.validacion').text('correcto');
     }
     else{
     		//alert('el número no es válido');
        $('.validacion').text('el número no es válido');
     }*/
     
	});
   
});