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

modulo on-line

La prima impressione che si ha di solito come utente di un'applicazione Web è quando si compila un modulo Web. Sono stupito dal numero di moduli web là fuori che non hanno convalida o che aspettano che tu invii i contenuti del tuo modulo prima di dirti quali problemi potresti avere.

La mia regola empirica è che tutto ciò che non è convalidato è supportato. Tutto ciò che può essere convalidato prima di inviare il modulo deve esserlo. Con l'avvento di Ajax, puoi persino convalidare i dati rispetto al tuo database prima dell'invio. Non scegliere la strada pigra: gli utenti apprezzano l'aiuto!

Ecco alcuni esempi:

  1. Indirizzi e-mail – Non mi dispiace i moduli che ti fanno compilare due volte il tuo indirizzo email per convalidarli, ma il fatto che non ti dicano se corrispondono o meno o sono costruiti in modo appropriato è imperdonabile.
  2. Le password – Se hai intenzione di farmi digitare una password due volte, verifica che i valori siano gli stessi prima di inviare il modulo.
  3. resistenza password – Se hai bisogno di una certa sicurezza della password (combinazione di caratteri alfanumerici o maiuscole), forniscimi un feedback mentre inserisco la mia password. Non aspettare che la invii prima di dirmi che non è riuscita.
  4. Date – Se desideri la data nel formato am/g/aaaa, consentimi di inserire le informazioni in un unico campo digitando quei valori e formattandoli in modo appropriato. Se vuoi degli zeri iniziali, inseriscili dopo. Va bene visualizzare un formato e salvarne un altro nel database.
  5. Data odierna - Compila per me! Perché mi chiedi di inserire la data quando già la conosci ?!
  6. Formato data – Se hai una domanda internazionale, puoi impostare un formato della data predefinito in base all'internazionalizzazione della tua domanda. Ovviamente, è bene avere un'opzione per gli utenti di sovrascrivere tale opzione e selezionare la propria.
  7. Numeri di previdenza sociale – è abbastanza semplice aggiungere alcuni javascript che saltano automaticamente da un campo all'altro o inseriscono a livello di codice un trattino tra i valori.
  8. Numeri di telefono – tenendo in considerazione l'Internazionalizzazione, anche questi tipi di campi possono essere semplificati formattando il numero di telefono nell'interfaccia, ma salvandolo in un altro formato che sia efficiente per il tuo back-end. Non costringere gli utenti a digitare parentesi, spazi e trattini.
  9. Lunghezza massima del testo – se limiti il ​​numero di caratteri memorizzati nel database, NON farmi digitare così tanti caratteri! Non richiede nemmeno una convalida difficile... è solo un'impostazione nella casella di testo.
  10. Lunghezza minima del testo - se hai bisogno di una lunghezza minima del testo, suona l'allarme finché non ho abbastanza caratteri.

Ecco un esempio di una funzione di sicurezza della password da Saggezza Geek:

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

    Sono d'accordo che queste siano ottime caratteristiche per i moduli, ma dire che è "imperdonabile" non eseguire la convalida javascript front-end è un'opinione più personale. Adoro lavorare in javascript e ho scritto alcune maschere di modifica piuttosto ordinate per fare alcune delle cose di cui parli, ma molte di esse sono tutt'altro che banali e molti dei pacchetti di convalida dei form javascript là fuori hanno una serie di grossi buchi. Non tutti investiranno il tempo nella duplicazione della convalida back-end con (il più delle volte) convalida javascript front-end più complessa.

    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:

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

    Se le persone non lo fanno già nei loro moduli, allora stanno solo imparando o il modulo non è abbastanza importante per usare la convalida.

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

    • 8

      Jay,

      Mi dispiace per quello! Il mio punto di vista non era assolutamente fornire feedback agli sviluppatori: venivo davvero dal punto di vista di un Product Manager. Sono d'accordo con te, ma è interessante che altri sviluppatori non lo facciano! Penso che sia un peccato.

      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! Mi hai beccato, Amanda! Vorrei avere il tempo di eseguire una migliore convalida dei moduli e di integrarli in WordPress. Mi piace particolarmente il Adobe Spry quadro di convalida e mi piacerebbe vedere qualcuno integrare i due!

      Grazie! (E apprezzo sempre che ci siano più opinioni su qualsiasi argomento).
      Doug

Cosa ne pensi?

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