it-swarm-eu.dev

Convalida del modulo lato client generico

Sono l'autore del jQuery Form Validation plugin , che ho iniziato a scrivere nel 2006. Da allora ho fatto alcuni sforzi per migliorare l'interazione predefinita, senza che lo sviluppatore abbia utilizzato il plug-in per personalizzare nulla. Lo sforzo è ben speso, in quanto ha consentito agli sviluppatori senza alcuna istruzione nella progettazione dell'interazione di ottenere alcuni solidi miglioramenti nelle loro forme.

Spero di raccogliere alcuni suggerimenti qui per ulteriori miglioramenti. Se ci sei dentro, inizia giocando un po 'con demo predefinite .

Il comportamento che vedrai lì è descritto qui , per citare: per impostazione predefinita, i moduli sono convalidati al momento dell'invio, attivati ​​dall'utente facendo clic sul pulsante di invio o premendo invio quando un input del modulo è attivo (opzione onSubmit). Inoltre, una volta che un campo è stato evidenziato come non valido, viene convalidato ogni volta che l'utente digita qualcosa nel campo (opzione onkeyup). Quando l'utente inserisce qualcosa di non valido in un campo valido, viene anche convalidato quando il campo perde lo stato attivo (opzione onblur).

L'obiettivo di queste interazioni è fornire feedback il più presto possibile, evitando al contempo di infastidire gli utenti. La visualizzazione di messaggi di errore prima che l'utente abbia avuto la possibilità di digitare qualcosa non è utile.

Un problema che qualcuno ha notato di recente è questo: (Inizia da zero, quindi) focalizza un campo, digita qualcosa in esso, eliminalo, scheda fuori dal campo. In tal caso, anche se il campo è obbligatorio, il plugin non lo dirà. Che qualcuno ha suggerito di cambiarlo e di attivare la convalida più "aggressiva" non appena qualcuno ha iniziato a digitare in un campo. Non ne sono così sicuro.

Un problema più complesso è quello della visualizzazione dei messaggi di errore. Il plugin può essere personalizzato abbastanza pesantemente, come visto in questo demo di Marketo . Qui i messaggi in linea vengono visualizzati solo per regole diverse da quelle richieste, ad es. inserendo "foobar" come verrà visualizzato l'indirizzo e-mail "Inserisci un indirizzo e-mail valido, ad esempio: [email protected]" accanto a quel campo, ma per il resto solo "Hai perso 12 campi. Sono stati evidenziati di seguito." viene visualizzato in alto mentre i campi sono evidenziati con un bordo rosso. Sebbene funzioni bene in questo specifico progetto, dubito che sia possibile renderlo predefinito per la convalida di moduli generici che funziona ovunque.

Avere un buon default è sicuramente importante, poiché anche i siti piuttosto popolari tendono a copiare il codice demo e usarlo così com'è.

Attendo con ansia i tuoi suggerimenti e una buona discussione! Fammi sapere se dovrei porre questioni specifiche in domande separate.

10
Jörn Zaefferer
  • Fornire all'utente una sorta di conferma che il loro input è stato accettato e validato correttamente. Molte UI usano il semplice "segno di spunta" aggiunto dopo il campo di input per visualizzarlo

  • Consentire agli utenti di sapere cosa richiede loro il campo di input tramite una sorta di indicazione basata sul design (ad es. Un valore predefinito che cancella)

Se sono un utente che sa cosa mi è richiesto (ad es. Un nome utente più lungo di 2 caratteri), ho meno probabilità di provare a digitare un input non valido in primo luogo. Questo potrebbe essere sotto forma di un valore predefinito per il campo che si cancella automaticamente sull'input.

Inserisci il tuo indirizzo e-mail: [Esempio: [email protected]] (Cancella il focus)

Questo valore predefinito può essere estratto dal campo "valore" del campo o generato sul lato client in base alle regole richieste. Dipende da quanto lavoro potresti voler inserire.

  • Alcune UI stanno ora introducendo un grafico che appare nell'angolo in alto del campo di input in fase di convalida per mostrare agli utenti che è necessario (questo differisce dal tradizionale * denoter) ma è altrettanto efficace.

Spero che questi aiuti,

Addy

AddyOsmani.com

3
Addy Osmani

C'è un ottimo articolo di Luke Wroblewski su A List Apart: Inline Validation in Web Forms . Dice che l'uso della convalida durante la digitazione porta a tempi di completamento della forma più lunghi e frustrazioni.

Suggerirei il design del modulo Web del libro di Luke Wroblewski ( Amazon , Google Books ). Descrive in dettaglio i messaggi di errore, la convalida, la guida e tutti gli argomenti relativi ai moduli Web.

1
Zoltán Gócza