A veces es necesario validar con JavaScript campos de texto que serán numéricos, si bien en HTML 5 esto se soluciona con los nuevos tipos de campos de texto tenemos que tener presente que es posible que nuestros usuarios no accedan a la web con un navegador moderno.
Por eso es este post para mostrar una vía que permite validar campos de texto como numéricos en JavaScript. Con campos numéricos me refiero a números enteros, con decimales y con signo.
Nota: recordar que las validaciones por JavaScript nunca deben ser las únicas que hagamos, siempre hay que validar los datos del lado del servidor.
Para validar estos campos no voy a utilizar ningún plugin específico de jQuery que los hay, solo utilizaré la librería base y las funciones focusout y keydown.
Antes que nada veamos que código ASCII tienen las teclas que nos interesa permitir:
| Código numérico | Teclas |
| 8 | Backspace (<-) |
| 9 | Tabulador (Tab) |
| 13 | Retorno (Return) |
| 46 | Suprimir |
| 189 y 173 | Signo negativo |
| 190 | Punto decimales |
| 37 al 40 | Teclas de desplazamiento |
| 48 al 57 | Teclado numérico |
| 96 al 105 | Números |
Como curiosidad adicional decir que las teclas de desplazamiento si se activa el Bloq desplazamiento mantienen los mismos códigos, cosa que no ocurre con los números.
Con solo estas teclas tenemos la validación adicional de no permitir el uso de Ctrl C y Ctrl V en estos campos (no se puede copiar, pegar ni cortar)
Lo primero que hay que hacer es detectar las teclas pulsadas y validarlas:
$('.campos’).keydown(function(event) {
// teclas especiales backspace, tabulador, return, izquierda, derecha, suprimir, -, .
var permitidos = [8,9,13,37,39,46,173,189,190];
if(!esNumerico(event.which,permitidos))
event.preventDefault();
});
La función esNumerico admite 2 variables, un valor entero con la tecla pulsada y un array de enteros con las teclas permitidas que no son numéricas, el código es el siguiente:
function esNumerico(pulsada,permitidos){
if($.inArray(pulsada,permitidos)){
return true;
}
if(pulsada >= 48 && pulsada <= 57){
return true;
}
if(pulsada >= 96 && pulsada <= 105){
return true;
}
return false;
}
Con esto seria suficiente pero podemos añadir una validación extra cuando el campo pierde el foco:
$(".costes").focusout(function() {
if($.isNumeric($(this).val())){
…….
}
else{
$(this).val("");
}
});
La función $.isNumeric solo está disponible en versiones de jQuery superiores o igual a la 1.7 y la función $.inArray para jQuery 1.2 o superiores.
Comentarios