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 pueda ser validado 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 están bien construidos es inexcusable.
  2. contraseñas - Si me va a hacer que escriba 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 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 apropiadamente. Si desea ceros a la izquierda, colóquelos después. Está bien mostrar un formato y guardar otro en su base de datos.
  5. El día de hoy - ¡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 el número 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

    I agree those are great features for forms, but saying that it is “inexcusable” to not do perform front end javascript validation is a more of an personal opinion. I love working in javascript, and have written some pretty neat editmasks to do some of the things you talk about, but a lot of them are far from trivial, and many of the javascript form validation packages out there have a number of big holes. Not everyone will invest the time into duplicating their back end validation with (more often than not) more complex front end javascript validation.

    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).

    If people are not doing this already in their forms, then they are just learning or the form is not important enough to use validation.

    Los programadores web reales ya lo saben y lo hacen.

    • 8

      Arrendajo,

      Sorry about that! My point was definitely not to provide developer feedback – I really was coming from the point of view of a Product Manager. I agree with you – but it’s interesting that some other developers don’t! I think that’s unfortunate.

      ¡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! You busted me, Amanda! I do wish I had time to do better form validation and to integrate it into WordPress. I especially like the Adobe Spry marco de validación y me encantaría ver a alguien integrar los dos!

      Thanks! (And I always appreciate that there are multiple opinions on any topic).
      Doug

¿Qué piensas?

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