Header Ads

validación campo numérico de 0 a 20 JavaScript

Validación de campo numérico en este ejemplo de 0 a 20 para notas del estudiante:



HTML:

En el lado de la vista trabajaremos con la etiqueta <input />


<input type="text" class="grade" maxLength="2"/>

se está declarando un input de tipo texto y la clase lleva como atributo "grade" ahora realizaremos la parte de la validación en javaScript usando jQuery.

JQUERY

 En jquery existe un evento keypress: 
 en el siguiente código se se está realizando las validaciones: 
 1. si el primer carácter es menor que 2 entonces puede presionar 0-9
 2. si el primer carácter es mayor o igual que 2 entonces puede presionar 0-0
 3. caso contrario puede presionar del 0 - 2
 4. al final retorna false o true
jQuery(".grade").keypress(function(e) {   
var result;
if($(this).val().length > 0 && ($(this).val()).charAt(0) < 2){//1
result = validationNumber(e, 48, 57);
}else if($(this).val().length > 0 && ($(this).val()).charAt(0) >= 2){//2
result = validationNumber(e, 48, 48);
}else{//3
result = validationNumber(e, 48, 50);
}
return result;
});

JAVASCRIPT:

En la parte de JavaScript se realiza la función validationNumber() que recibe 3 parámetros:

function validationNumber(e, i, f){
var keyCode = e.which ? e.which : e.keyCode;
var ret = (keyCode >= i && keyCode <= f);
return ret;
}

la siguiente función recibe el evento realizado por el usuario y obtiene el código del carácter presionado y valida que el código o keycode este dentro de los parámetros enviados.

Puedes ver:

1. Ejemplo de pagos con paypal código fuente en : http://cloudsrcsoft.com/Paypal/
2. Mostrar bloques con código HTML dentro de una página web: http://lawebdenoticiastecnologia.blogspot.com/2017/02/mostrar-bloques-con-codigo-html-dentro.html


No hay comentarios