Impresione a sus visitantes web con la validación de formularios en tiempo real

formulario en línea

La primera impresión que suele tener como usuario de una aplicación web es cuando completa un formulario web. Me sorprende la cantidad de formularios web que existen sin validación o que esperan a que envíe el contenido del formulario antes de decirle qué problemas podría tener.

Mi regla general es que se admite todo lo que no esté validado. Todo lo que se pueda validar antes de enviar el formulario debe serlo. Con la llegada de Ajax, incluso puede validar los datos en su base de datos antes de enviarlos. No elijas la ruta perezosa, ¡los usuarios agradecen la ayuda!

He aquí algunos ejemplos:

  1. Direcciones de Correo Electrónico - No me importan los formularios que te obliguen a completar dos veces tu dirección de correo electrónico para validarlos, pero el hecho de que no te digan si coinciden o si están bien construidos es inexcusable.
  2. contraseñas - Si me va a obligar a escribir una contraseña dos veces, valide que los valores sean los mismos antes de publicar el formulario.
  3. seguridad de la contraseña - Si necesita una cierta seguridad de la contraseña (combinación de caracteres alfanuméricos o mayúsculas y minúsculas), envíeme algunos comentarios mientras escribo mi contraseña. No espere a que envíe la contraseña antes de decirme que falló.
  4. Fechas - Si desea la fecha en formato am / d / aaaa, permítame ingresar la información en un solo campo escribiendo esos valores y formateándolos de manera apropiada. Si desea ceros a la izquierda, colóquelos después. Está bien mostrar un formato y guardar otro en su base de datos.
  5. Fecha - ¡Llénelo por mí! ¿Por qué me pide que complete la fecha cuando ya la sabe?
  6. Formato de la fecha - Si tiene una solicitud internacional, puede predeterminar un formato de fecha basado en la internacionalización de su solicitud. Por supuesto, es bueno tener una opción para que los usuarios anulen esa opción y seleccionen la suya propia.
  7. Números de Seguridad Social - Es bastante simple agregar algo de JavaScript que salte automáticamente de un campo a otro o coloque un guión entre los valores mediante programación.
  8. Números de Teléfono - Teniendo en cuenta la internacionalización, estos tipos de campos también se pueden simplificar formateando el número de teléfono en la interfaz, pero guardándolo en otro formato que sea eficiente para su back-end. No haga que sus usuarios escriban entre paréntesis, espacios y guiones.
  9. Longitud máxima del texto - si limita la cantidad de caracteres almacenados en su base de datos, ¡NO me deje escribir tantos caracteres! Ni siquiera requiere una validación difícil ... es solo una configuración en el cuadro de texto.
  10. Longitud mínima del texto - si necesita una longitud mínima de texto, haga sonar la alarma hasta que tenga suficientes caracteres.

A continuación, se muestra un ejemplo de una función de Fortaleza de la contraseña de Sabiduría friki:

Escriba la contraseña:

ACTUALIZACIÓN: 10/26/2007 - Encontré un recurso ordenado con una biblioteca de JavaScript disponible para descargar para validación de formulario, llamada LiveValidation.

16 Comentarios

  1. 1

    Estoy de acuerdo en que esas son excelentes características para los formularios, pero decir que es "imperdonable" no realizar la validación de javascript de front-end es una opinión más personal. Me encanta trabajar en javascript, y he escrito algunas máscaras de edición bastante interesantes para hacer algunas de las cosas de las que habla, pero muchas de ellas están lejos de ser triviales, y muchos de los paquetes de validación de formularios de javascript que existen tienen una serie de grandes agujeros. No todo el mundo invertirá el tiempo en duplicar su validación de back-end con (la mayoría de las veces) una validación de javascript de front-end más compleja.

    Buenos puntos, pero definitivamente no es algo que todos los formularios en línea "necesitan" en mi opinión.

  2. 2

    El verificador de contraseñas está relativamente roto. Cualquier contraseña es suficientemente buena si es larga.

    Ejemplo:

    ¿Es realmente una contraseña mediocre?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    Para mí, la mejor validación de formulario es cuando le da al usuario la impresión de una validación del lado del cliente mientras que es una validación del lado del servidor / AJAX.
    Simplemente tiene que adjuntar a los elementos de su formulario algún manejo de eventos (tecla, desenfoque, clic, etc.) que publican el formulario completo a través de AJAX en el servidor, invocando una función de "verificación" que devuelve los mensajes de error correspondientes (esta contraseña también es simple, esa fecha está en formato incorrecto, etc ...)
    Cuando el usuario finalmente publica el formulario haciendo clic en un botón de envío, aún puede usar la función del lado del servidor de "verificación" para validar por última vez el formulario antes de insertar los datos en una base de datos o algún otro proceso.
    De esta manera, los usuarios están contentos con la validación en curso Y los desarrolladores están contentos con el desarrollo de validación solo del lado del servidor.

    • 5
      • 6

        No tan rápido Doug: estoy de acuerdo con tu premisa original de que estas útiles funciones, como formatear un SSN sobre la marcha, son triviales. Y es perezoso publicar un mensaje de que está mal, cuando puedes arreglarlo sin tener que adivinar el formato.

        Sin embargo, también estoy de acuerdo con Nicolas sobre el uso de la lógica del lado del servidor junto con AJAX.

  4. 7

    Tu título dice "Impresiona a tus amigos ..." pero no me impresionas con este mensaje de 2 minutos telefónico.

    Vuelva a escribir su título (demasiado engañoso, le hace pensar que se están discutiendo ejemplos y prácticas).

    Si las personas aún no están haciendo esto en sus formas, entonces solo están aprendiendo o la forma no es lo suficientemente importante como para usar la validación.

    Los programadores web reales ya lo saben y lo hacen.

    • 8

      Arrendajo,

      ¡Lo siento por eso! Mi punto definitivamente no era proporcionar comentarios de los desarrolladores; realmente venía desde el punto de vista de un Gerente de Producto. Estoy de acuerdo contigo, ¡pero es interesante que otros desarrolladores no lo hagan! Creo que eso es lamentable.

      ¡Gracias por tomarse el tiempo!
      Doug

  5. 9

    Estoy totalmente de acuerdo en que la validación es un componente necesario de cualquier aplicación. Como líder de equipo, por lo general me encuentro enviando el código para que esté "terminado" por razones como la falta de validaciones o la restricción de la longitud de entrada de texto.

    Para la mayoría de las cosas en las que trabajo, encuentro que toma alrededor del 50% del tiempo hacer que algo funcione, en condiciones normales y si los usuarios usan el sistema de la manera que yo pretendía. El otro 50% del tiempo de desarrollo proviene de verificar su entrada, garantizar que se mantenga la integridad de los datos y hacer que los campos del formulario no permitan que se ingresen datos maliciosos.

    Escribí una publicación sobre cómo uso InputVerifiers en mis aplicaciones de hava swing y muestro cómo verifico un campo de texto de correo electrónico. La expresión regular que utilizo se puede modificar fácilmente para validar números de teléfono, códigos postales, SSN, etc.

    Mi publicación de blog está en http://timarcher.com/?q=node/36

    ¡Buen comentario, Doug!

  6. 10

    Estoy de acuerdo. Las contraseñas son realmente importantes y deben tomarse en serio. Creo que es normal que casi todas las formas tecleen la contraseña dos veces, pero no mostrar la validez de las dos contraseñas demuestra que no se está considerando seriamente.

  7. 11

    Estoy de acuerdo en que la validación del cliente puede ser una característica muy fácil de usar. Sin embargo, es más importante asegurarse de que las validaciones en sí mismas tengan sentido.

    Proporcionó un ejemplo brillante de cómo la validación puede engañar a los usuarios y, lo que es peor, alejarlos de nuestro sitio:

    Validación de la fuerza de la contraseña de Geek Wisdom de considera tZhKwnUmIss para ser una contraseña débil. No solo es una contraseña perfectamente segura, sino que también alienará a los usuarios porque les da la falsa impresión de que iniciar sesión en su sitio con esta contraseña será de alguna manera inseguro.

    Sería mucho mejor (y más fácil) simplemente insinuar a los usuarios que una buena contraseña tiene al menos seis caracteres y debe contener tanto números como letras.

    Otras validaciones cuestionables incluyen nombres de usuario que necesitan una cierta longitud mínima o que pueden no contener espacios. ¿Qué pasa con los nombres de usuario? X, John Doe, o incluso # *! §? Yo puedo manejar eso.

  8. 12

    Estoy de acuerdo contigo. Algunos formularios se ven bien, pero no ofrecen una buena validación. Se proporciona información personal y es apropiado tomarla en serio como cualquier formulario comercial en papel.

  9. 13
  10. 14
  11. 15

    Me parece un poco divertido que publiques sobre la bondad de proporcionar validación de formularios en tiempo real y, sin embargo, tu formulario de comentarios en la parte inferior de la publicación no proporciona ninguno de estos ...

    Me doy cuenta de que estás usando WordPress para publicar tus pensamientos en Internet, pero quizás asegurarte de que practicas lo que predicas tampoco es una mala idea. 🙂

    Buen post, por cierto, incluso si no estoy necesariamente de acuerdo con todo lo que has escrito.

    • 16

      Doh! ¡Me arrestaste, Amanda! Desearía tener tiempo para hacer una mejor validación de formularios e integrarlos en WordPress. Especialmente me gusta el adobe spry marco de validación y me encantaría ver a alguien integrar los dos!

      ¡Gracias! (Y siempre agradezco que haya múltiples opiniones sobre cualquier tema).
      Doug

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.