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

formulario en línea

The first impression you usually have as a user of a Web Application is when you fill out a web form. I’m amazed at the number of web forms out there that have zero validation or that wait for you to submit your form contents before telling you what problems that you might have.

My rule of thumb is that anything that is not validated is supported. Anything that can be validated prior to submitting the form must be. With the advent of Ajax, you can even validate data against your database prior to submission. Don’t pick the lazy route – users appreciate the help!

He aquí algunos ejemplos:

  1. Direcciones de Correo Electrónico – I don’t mind forms that make you fill out your email address twice to validate them, but the fact that they don’t tell you whether or not they match or are constructed appropriately is inexcusable.
  2. contraseñas – If you’re going to make me type in a password twice, then please validate that the values are the same before posting the form.
  3. seguridad de la contraseña – If you require a certain password strength (combination of alphanumeric characters or cases), then provide some feedback for me while I’m typing my password in. Don’t wait for me to submit before telling me it failed.
  4. Fechas – If you’d like the date in a m/d/yyyy format, then allow me to enter the information in a single field by typing those values and formatting them appropriately. If you want leading zeros, put them in after. It’s okay to display one format and save another in your database.
  5. Fecha - ¡Llénelo por mí! ¿Por qué me pide que complete la fecha cuando ya la sabe?
  6. Formato de la fecha – If you have an international application, you can default a date format based on Internationalization of your application. Of course, it’s good to have an option for users to override that option and select their own.
  7. Números de Seguridad Social – it’s pretty simple to add some javascript that automatically jumps from field to field or programmatically put a dash in between values.
  8. Números de Teléfono – taking Internationalization into consideration, these types of fields also can be simplified by formatting the telephone number in the interface, but saving it in another format that’s efficient for your back-end. Don’t make your users type in parenthesis, spaces, and dashes.
  9. Longitud máxima del texto – if you limit the number of characters stored in your database, then DON’T let me type that many characters in! It doesn’t even require difficult validation… it’s just a setting on the textbox.
  10. Longitud mínima del texto - si necesita una longitud mínima de texto, haga sonar la alarma hasta que tenga suficientes caracteres.

Here’s an example of a Password Strength function from 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.