Restringir inputs con jQuery

Como usuario, es bastante irritante que un input de un formulario te pemita ingresar un tipo de dato incorrecto, ya que al hacerlo el error se mostrará hasta que se envie la información, o peor aún, no recibir ninguna clase de respuesta de alerta y terminar mandando información errónea.

Experiencia del usuario

La mayoría de las ocasiones los usuarios fallan al llenar un formulario por algún requerimiento que no fue especificado de manera explícita en alguna parte de la página. Es por esto, que es necesario restringir el tipo de información que el usuario puede insertar en ciertos campos, de esa manera nos aseguraremos que de primera mano el visitante estará llenando de forma correcta cada campo.

El usuario buscará soluciones en base a las herramientas que se le proporcionen, por ejemplo, un cliente de un banco no introducirá letras cuando el cajero automático le pida introducir su clave, ya que el teclado sólo le da la opción de introducir números. Desgraciadamente esta clase de limitación no se puede realizar en la mayoría de los ordenadores, aunque en los teléfonos móviles y dipositivos touch ya se ha venido implementando.

Restricción por código

Hasta el día en que todos los dipositivos cuenten con un teclado touchscreen, tendremos que seguir lidiando con la restricción y validación específica por campo, es por ello que en sustitución a la limitación mediante un tipo de teclado, podemos recurrir a la limitación mediante código. Aunque, la elaboración del código necesario para efectuar la restricción en formularios, puede resultar en una de las mayores frustaciones para un diseñador web.

En la actualidad, gracias al uso de tecnologías como HTML5 y el diseño para móviles, se ha logrado reducir los tiempos y la cantidad de código necesario para restringir y validar los campos que conforman los formularios, sin embargo la poca estandarización que aún existe y la no compatibilidad con ciertas de éstas medidas, hacen que se tenga que recurrir a otra clase de opciones para cumplir estos objetivos.

Uso de jQuery

Gracias al uso de jQuery, podemos añadir ese procesamiento necesario para crear el vínculo entre el teclado y el input que se muestra en el formulario, y así restringir el tipo de datos que se permitirán introducir.

Lo primero que debemos hacer es incluir la librería jQuery en nuestra página, como normalmente lo hacemos. Una vez que se tenga esto, debemos establecer el campo que queremos restringir, para nuestro ejemplo usuaremos un campo que contendrá un número telefónico.

<fieldset>
<label for="tel">Teléfono:</label>
<input type="text" id="tel" class="input_tel" />
</fieldset>

El siguiente paso sería establecer el script que permita atrapar el evento de tecleo por parte del usuario y dentro de este evitar el uso de las teclas que no sean númericas.

jQuery(document).ready(function() {
    jQuery('.input_tel').keypress(function(tecla) {
        if(tecla.charCode < 48 || tecla.charCode > 57) return false;
    });
});

Lo que hace el siguiente código, es que una vez que el documento se encuentra listo (document ready), el método keypress identifica cuando el usuario ha presionado una tecla dentro de algún elemento que cuente con la clase “input_tel”. Dentro de la funcionalidad de este método, identificamos cual de las teclas fue presionada gracias a la propiedad charCode.

Las caracteres que contienen a los números del 0 al 9 están entre el código 48 y el 57, por lo que si agregamos una condición para detectar todos los símbolos que el usuario introduzca fuera de este rango, podremos regresar un valor de falso para que ninguna acción se vea reflejada en el input.

Esta técnica puede ser aplicada para casi cualquier campo, inclusive podemos desarrollar algunas reglas de lógica complejas combinando los operadores AND y OR. Por ejemplo, si quisiéramos restringir el campo de texto que utilizamos para obtener el apellido del usuario, debemos permitir únicamente letras minúsuclas (códigos del 97 al 122), mayúsculas (códigos del 65 al 90) y quizás el guión (código 45)

jQuery('.input_apellido').keypress(function(tecla) {
if((tecla.charCode < 97 || tecla.charCode > 122) && (tecla.charCode < 65 || tecla.charCode > 90) && (tecla.charCode != 45)) return false;
});

Y si estamos desarrollando un sitio en español, es obvio que queramos permitir el uso de acentos y la ñ, por lo que podemos utilizar la condición:

if (charCode >= 192 && charCode <= 255) {
   return false
}

Conclusión

El refrán nos dice que es mejor prevenir que lamentar, con esta clase de restricciones estamos previendo lo que el usuario puede hacer, permitiendo mejorar su experiencia y optimizando la usabilidad de los elementos de nuestro formulario. De esa manera, el número de usuarios que empiezan pero no terminan un formulario se verá drásticamente reducido.