Restricción de entrada con JQuery
Si hay una cosa que me vuelve loco en línea, es cuando los formularios de entrada me permiten ingresar datos incorrectos, solo para señalar el error después de intentarlo y enviarlo. Parece que la mitad de los formularios que presento deben rellenarse y enviarse nuevamente porque no incluí una letra mayúscula en mi contraseña, o lo hice, o la contraseña solo puede ser numérica, o algún otro requisito que nadie mencionó.
La forma en que funciona el cerebro, buscamos soluciones basadas en las herramientas que tenemos enfrente. Usted no ingresa letras mayúsculas en el cajero automático, ¿verdad? No, porque el teclado del cajero automático solo tiene números. Es posible que aciertes el número equivocado por error, pero nunca has intentado ingresar tu dirección de correo electrónico o el apellido de soltera de tu madre.
Ahí está el problema, el teclado que usas complica la entrada de datos en línea. Probablemente tenga entre 75 y 100 teclas y se puede acceder fácilmente a más caracteres manteniendo pulsadas varias combinaciones de teclas. Usarlo para iniciar sesión en Facebook es como buscar leche en un Ferrari.
Por supuesto, su teclado tiene que tener más opciones de entrada que cualquier campo de formulario en particular, ya que es una herramienta de uso múltiple; prácticamente no puedes tener un teclado diferente para cada tipo de entrada posible.
Esto lleva a un serio problema de usabilidad: a los usuarios constantemente se les pide que 'corrijan' su información para adecuarse a un formulario. Esa es una gran manera de aumentar la frustración y perder negocios.
Los dispositivos de pantalla táctil han avanzado mucho en esta área al modificar el teclado en pantalla para adaptar los tipos de entrada posibles a los datos requeridos; introduzca una dirección de correo electrónico en un iPhone, por ejemplo, y no podrá ingresar un espacio por error, porque no se proporciona la barra espaciadora.
Imagen de teclado digital a través de Shutterstock
Hasta que todos estemos trabajando en pantallas táctiles, necesitamos una solución temporal, y de hecho hay una muy simple: usando jQuery podemos deslizar una capa de inteligencia entre el teclado y el campo de entrada y solo aceptar los datos si cae dentro de los límites esperados , ignorando cualquier cosa fuera de esos límites, seguro de que es un error.
Primero, tenemos que configurar un campo de entrada en HTML que queremos restringir, un número de teléfono, por ejemplo:
Luego, en la cabecera del documento, debemos importar jQuery:
E inmediatamente después agregue el siguiente script:
Esta secuencia de comandos se ejecuta una vez que el documento está listo, adjuntando un método de pulsación de tecla al campo de entrada .phoneInput . Luego detectamos qué tecla se ha presionado en función de su propiedad charCode - el número 0 tiene asignado el código 48, 1 es 49 y así sucesivamente - cualquier tecla que esté fuera de nuestro rango debería devolver falsa. Si el método devuelve falso, el navegador simplemente ignorará la pulsación de tecla.
Esto significa que si el usuario pulsa cualquier tecla que no sea 0-9, se ignorará la entrada, restringiendo efectivamente la entrada a los números.
Podemos aplicar la misma técnica a casi cualquier campo, construyendo reglas complejas utilizando OR lógico y OR lógico. Por ejemplo, si quisiéramos restringir la entrada de un apellido, necesitaríamos restringir la entrada a letras minúsculas (97-122), mayúsculas (65 - 90) y el guión ocasional (45):
$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});Usted puede prueba una demostración aquí .
Este código es una mejora progresiva. Eliminará la tensión de la validación de su servidor, pero eso no significa que tampoco deba validar la información que está recopilando.
La prevención, como dice el refrán, es mejor que curar; y al usar este consejo, verá una reducción en el número de personas que comienzan, pero no completan sus formularios, especialmente cuando se trata de requisitos de datos complejos.
¿Los usuarios regularmente cometen errores en sus formularios? ¿Cómo manejas los errores? Háganos saber en los comentarios.
Imagen / miniatura destacada: imagen del teclado a través de Shutterstock