Stupisci i tuoi visitatori web con la convalida dei moduli in tempo reale

modulo on-line

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!

Ecco alcuni esempi:

  1. Indirizzi e-mail – 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. Le password – 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. resistenza password – 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. Date – 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. Data odierna - Compila per me! Perché mi chiedi di inserire la data quando già la conosci ?!
  6. Formato data – 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. Numeri di previdenza sociale – it's pretty simple to add some javascript that automatically jumps from field to field or programmatically put a dash in between values.
  8. Numeri di telefono – 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. Lunghezza massima del testo – 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. Lunghezza minima del testo - se hai bisogno di una lunghezza minima del testo, suona l'allarme finché non ho abbastanza caratteri.

Here's an example of a Password Strength function from Geek Wisdom:

Digita la password:

AGGIORNAMENTO: 10/26/2007 - Ho trovato una bella risorsa con una libreria JavaScript disponibile per il download per convalida del modulo, chiamato LiveValidation.

Commenti

  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.

    Aspetti positivi, ma sicuramente non è qualcosa che ogni modulo online "ha bisogno" secondo me.

  2. 2

    Il controllo delle password è relativamente guasto. Qualsiasi password è abbastanza buona se è lunga.

    esempio di calcolo dei costi nella Domanda:

    È davvero una password mediocre?

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

  3. 4

    Per me la migliore convalida del modulo è quando si dà all'utente l'impressione di una convalida lato client mentre è una convalida lato server / AJAX.
    Devi semplicemente allegare agli elementi del tuo modulo alcuni gestori di eventi (keyup, blur, click, ecc ...) che inviano l'intero modulo tramite AJAX al server, invocando una funzione "check" che restituisce i messaggi di errore corrispondenti (anche questo passowrd è semplice, quella data è nel formato sbagliato, ecc ...)
    Quando l'utente finalmente pubblica il modulo facendo clic su un pulsante di invio, è comunque possibile utilizzare la funzione lato server "controlla" per convalidare un'ultima volta il modulo prima di inserire i dati in un database o in qualche altro processo.
    In questo modo, gli utenti sono soddisfatti della convalida in tempo reale E gli sviluppatori sono soddisfatti dello sviluppo della convalida solo lato server.

    • 5
      • 6

        Non così veloce Doug - Sono d'accordo con la tua premessa originale che queste utili funzionalità, come la formattazione di un SSN al volo, sono banali. Ed è pigro pubblicare un messaggio che è sbagliato, quando puoi risolverlo senza dover indovinare il formato.

        Tuttavia, sono anche d'accordo con Nicolas sull'utilizzo della logica lato server insieme ad AJAX.

  4. 7

    Il tuo titolo dice "Stupisci i tuoi amici ..." ma non riesci a impressionarmi con questo 2 min, telefonato per posta.

    Riscrivi il titolo (troppo fuorviante, fa pensare che ci siano esempi e pratiche in discussione).

    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.

    I veri programmatori web lo sanno già e lo fanno.

    • 8

      Jay,

      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.

      Grazie per aver dedicato del tempo!
      Doug

  5. 9

    Sono totalmente d'accordo sul fatto che la convalida sia un componente necessario di qualsiasi applicazione. In qualità di responsabile del team, di solito mi ritrovo a inviare il codice per essere "finito" per motivi quali la mancanza di convalide o la limitazione della lunghezza di input del testo.

    Per la maggior parte delle cose su cui lavoro, trovo che ci vuole circa il 50% del tempo per far funzionare qualcosa, in condizioni normali e se gli utenti utilizzano il sistema nel modo desiderato. Il restante 50% del tempo di sviluppo deriva dal controllo dei dati immessi, dal mantenimento dell'integrità dei dati e dal fatto che i campi del modulo non consentano l'inserimento di dati dannosi.

    Ho scritto un post su come utilizzo InputVerifiers nelle mie app hava swing e mostra come verifico un campo di testo e-mail. L'espressione regolare che utilizzo è facilmente modificabile per convalidare numeri di telefono, codici postali, SSN, ecc.

    Il mio post sul blog è all'indirizzo http://timarcher.com/?q=node/36

    Buon commento Doug!

  6. 10

    Sono d'accordo. Le password sono davvero importanti e devono essere prese sul serio. Penso che sia normale per quasi tutti i moduli digitare due volte la password, ma non mostrare la validità delle due password mostra che non viene presa seriamente in considerazione.

  7. 11

    Sono d'accordo sul fatto che la convalida del client possa essere una funzionalità molto intuitiva. Tuttavia, è più importante assicurarsi che le convalide stesse abbiano effettivamente un senso.

    Hai fornito un brillante esempio di come la convalida può fuorviare gli utenti e, peggio ancora, allontanarli dal nostro sito:

    La convalida della forza della password di Geek Wisdom da consider tZhKwnUmIss essere una password debole. Non solo è una password perfettamente sicura, ma allontanerà anche gli utenti perché dà loro la falsa impressione che l'accesso al tuo sito utilizzando questa password sarà in qualche modo insicuro.

    Sarebbe molto meglio (e più facile) suggerire semplicemente agli utenti che una buona password è lunga almeno sei caratteri e dovrebbe contenere sia numeri che lettere.

    Altre convalide discutibili includono nomi utente che richiedono una certa lunghezza minima o che potrebbero non contenere spazi. Cosa c'è che non va nei nomi utente X, john doeo anche # *! §? Posso gestirlo.

  8. 12

    Sono d'accordo con te. Alcuni moduli sembrano a posto, ma non offrono una buona convalida. Le informazioni personali vengono fornite ed è giusto prenderle sul serio proprio come qualsiasi modulo aziendale in formato cartaceo.

  9. 13
  10. 14
  11. 15

    Trovo un po 'divertente che tu pubblichi la bontà di fornire la convalida del modulo in tempo reale e tuttavia, il tuo modulo di commento in fondo al post non fornisce nessuno di questi ...

    Mi rendo conto che stai usando WordPress per pubblicare i tuoi pensieri su Internet, ma forse anche assicurarti di mettere in pratica ciò che predichi non è una cattiva idea. 🙂

    Buon post, comunque, anche se non sono necessariamente d'accordo con tutto quello che hai scritto.

    • 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 quadro di convalida e mi piacerebbe vedere qualcuno integrare i due!

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

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.