<header>
  <h1>Ingreso limitado de caracteres</h1>
  <p>Validación de formularios</p>
</header>

<content>
	<div id="wrapper">
		
		<p>&nbsp;</p>
		<div class="input-group input-group-sm">
			<span class="input-group-addon" id="sizing-addon1">Sólo números</span>
			<input type="text" class="form-control" placeholder="#" regexp="[0-9]+" required aria-describedby="sizing-addon1">
		</div>
		
		<p>&nbsp;</p>
		<div class="input-group input-group-sm">
			<span class="input-group-addon" id="sizing-addon1">Sólo números (máximo 5 dígitos)</span>
			<input type="text" class="form-control" placeholder="#####" regexp="[0-9]{0,5}" required aria-describedby="sizing-addon1">
		</div>
		

		<p>&nbsp;</p>
		<div class="input-group input-group-sm">
			<span class="input-group-addon" id="sizing-addon1">Sólo letras</span>
			<input type="text" class="form-control" placeholder="a-z / A-Z"  regexp="[a-z|A-Z]+" aria-describedby="sizing-addon1">
		</div>
		
				<p>&nbsp;</p>
		<div class="input-group input-group-sm">
			<span class="input-group-addon" id="sizing-addon1">Número con formato</span>
			<input type="text" class="form-control" placeholder="#.#"  regexp="[0-9]+(\.([0-9]*)){0,1}" aria-describedby="sizing-addon1">
		</div>
		
				<p>&nbsp;</p>
		<div class="input-group input-group-sm">
			<span class="input-group-addon" id="sizing-addon1">Número con formato de fecha</span>
			<input type="text" class="form-control" placeholder="dd-mm-yyyy"  regexp="[0-9]{0,2}(\-([0-9]{0,2})(\-([0-9]{0,4})){0,1}){0,1}" aria-describedby="sizing-addon1">
		</div>
		
						<p>&nbsp;</p>
		<div class="input-group input-group-sm">
			<span class="input-group-addon" id="sizing-addon1">R.U.T.</span>
			<input type="text" class="form-control" placeholder="########-#"  regexp="[0-9]{0,10}(\-([0-9kK]{0,1})){0,1}" aria-describedby="sizing-addon1">
		</div>
		
		
	</div>
</content>

html, body {
    font-size: 10px;
    background: #e5ebf4;
    font-family: 'Open Sans', sans-serif !important;
}

body {margin:0;}

h1 {
  position:relative;
  margin:0px auto;
  width:auto;
  padding-bottom:0px;
  font-size:4.1rem;
  font-weight:300;
  letter-spacing: -0.15rem;
  color:#FFF
}

header {
  background:#2b303b;
  text-align:center;
  padding:10px;
}
header p {color:#96b5b4;}

#wrapper {
  width : 90%;
  margin : 0px auto;
}

#msgerror {
	font-size:1.4em;
}

// namespace de la aplicación
var UXAPP = UXAPP || {};

// paquete de validaciones
UXAPP.validador = {};

// método que inicia el validador con restriccion de caracteres
UXAPP.validador.init = function () {
	// busca los elementos que contengan el atributo regexp definido
	$("input[regexp]").each(function(){
			// por cada elemento encontrado setea un listener del keypress
			$(this).keypress(function(event){
				
				if ( event.which <= 32 )
					return 0;
				
				// extrae la cadena que define la expresión regular y creo un objeto RegExp 
				// mas info en https://goo.gl/JEQTcK
				var regexp = new RegExp( "^" + $(this).attr("regexp") + "$" , "g");
				
				// evalua si el contenido del campo se ajusta al patrón REGEXP
				if ( ! regexp.test( $(this).val() + String.fromCharCode(event.which) ) )
					event.preventDefault();
				
			});	
		
		});
	
}


// Arranca el validador al término de la carga del DOM
$(document).ready( UXAPP.validador.init );