Quale evento attivare la convalida e la formattazione del campo del modulo Javascript?

Question

Lasciatemi prima dire che convalidiamo tutti i campi sul lato server, quindi questa è una domanda sull'usabilità lato client.

Qual è la saggezza convenzionale su esattamente quando convalidare e formattare i campi di input del modulo html usando javascript?

Ad esempio, abbiamo un campo relativo al numero di telefono. Sono ammessi numeri, spazi, parentesi e trattini. Vogliamo che il campo contenga dieci cifre. Inoltre, vogliamo che il campo appaia (123) 456-7890, anche se l'utente non lo digita in questo modo.

Sembra che possiamo

• Convalida e formattalo quando l'utente esce dal campo.
• Convalida e formatta su ogni carattere inserito.
• Intercetta le sequenze di tasti e impedisce il l'utente immette caratteri errati.
• Alcune combinazioni di quanto sopra (ad es. formato all'entrata e convalida all'uscita, prevenzione all'entrata e formato all'uscita, ecc.)
• [ Aggiunto ] Attendi ed esegui tutta la convalida e la formattazione quando l'utente fa clic su Invia.

L'ho visto fatto in tutti questi modi, ma non riesco a trovare informazioni su cosa è il migliore (o addirittura generalmente accettato) dal punto di vista dell'usabilità e, soprattutto, del perché.

[ Modifica : alcuni chiarimenti]

Non stiamo assolutamente applicando standard di formato. Quando dico formato, intendo che useremo JavaScript per riscrivere le cose in modo che appaiano belle. Se l'utente digita 1234567890, lo cambieremo in (123) 456-7890. Non ci sono " regole di formattazione " che può fallire.

Lo distinguo dalla convalida perché se non digitano abbastanza numeri, dobbiamo farli correggere.

Suppongo che dovrei riformulare la domanda come " qual è la saggezza convenzionale su quando esattamente convalidare e esattamente quando formattare ...?

Buone informazioni nelle risposte finora!

MODIFICA : sto accettando la mia risposta di seguito nella speranza che altri possano trovare il link utile come ho fatto io

Answer 1

Di gran lunga la risposta migliore finora non è stata una risposta ma un commento (vedi sopra). La sto aggiungendo come risposta nel caso in cui qualcuno la dimentichi nel commento.

Vedi il seguente articolo su A List Apart.

Convalida in linea nei moduli Web di Luke Wroblewski

Answer 2

  

Convalida e formattalo quando l'utente esce dal campo.

Sì. Fornire un feedback non invasivo all'utente se le regole di convalida o formattazione falliscono. Con "non turistico" intendo non aprire una finestra di dialogo di avviso o modale, costringendo così l'utente a fare clic su qualcosa. Visualizza piuttosto dinamicamente un messaggio adiacente o sotto il campo in cui la convalida o la formattazione non sono riuscite.

  

Convalida e formatta su ogni carattere inserito.

No. Penso che ciò ostacoli l'usabilità. Fornisci invece all'utente una descrizione comandi o qualche altro suggerimento su quali siano le regole di formattazione o le regole di convalida. Per esempio. per un "richiesto" campo l'asterisco praticamente onnipresente, e per i campi con formattazione dire all'utente in anticipo quale sia il formato previsto.

  

Intercetta le sequenze di tasti e impedisce all'utente di immettere caratteri errati.

Se hai intenzione di impedire all'utente di inserire caratteri non validi, informa l'utente del fatto che hai appena bloccato il loro input, in modo non invasivo. Inoltre, non rubare la messa a fuoco del campo.

Quindi per me i principi generali sono:

1. Informa l'utente in anticipo delle tue regole di validazione e formattazione.
2. Non dare per scontato che l'utente sia avvistato, quindi tieni presente l'accessibilità del web e gli screen reader. (A meno che non si stia sviluppando un sito Web con un pubblico di destinazione limitato come una Intranet.)
3. Fornire all'utente un feedback non invasivo, il che significa che l'utente non deve fare clic su una finestra di avviso o su una finestra di dialogo modale ad ogni errore.
4. Rendi evidente quale casella di input ha fallito le regole di convalida o formattazione e spiega all'utente perché il suo input non è riuscito.
5. Non rubare lo stato attivo del mouse / puntatore quando si fornisce feedback.
6. Tieni a mente l'ordine delle schede, in modo che quando gli utenti orientati alla tastiera completano un campo, possono toccare la scheda e passare al campo di input / selezione logico successivo.

Answer 3

Stavo per descrivere varie opzioni, ma potrebbe essere utile solo usare un framework js esistente per gestire le maschere di input. Ecco un buon riassunto di varie opzioni

Answer 4

bmb afferma che stanno accettando qualsiasi formato e lo stanno cambiando nel formato desiderato (xxx) nnn-xxxx. Questo va molto bene. La domanda è la tempistica di A) il cambio formato e B) la validazione.

A) La modifica del formato deve essere eseguita quando l'utente esce dal campo. Presto è fastidioso e successivamente sconfigge lo scopo di mostrare il cambiamento affatto.

B) La convalida viene eseguita in modo più appropriato all'uscita dal campo o all'invio del modulo. Presto è frustrante e confuso per l'utente. In una forma lunga e complessa, con più di uno schermo, preferirei fare la convalida all'uscita dal controllo per facilitare le correzioni. In un breve modulo, lo farei al momento dell'invio per evitare di interrompere il flusso di compilazione del modulo. È davvero un giudizio, quindi provalo con utenti reali se possibile.

Preferibilmente stai testando il tuo lavoro con utenti reali in ogni caso, ma se non disponi di budget o di accesso per questo, un utente "rapido" e veloce " test può aiutare con decisioni come questa. Puoi catturare una manciata di persone che non hanno lavorato sul software (il più vicino possibile agli utenti finali reali) e chiedere loro di compilare il modulo. Chiedere loro di inserire le cose in modo specifico per ottenere un errore e quindi osservarle per correggerlo. Chiedi loro di parlare ad alta voce di ciò che stanno facendo in modo da non dover indovinare il loro processo di pensiero. Cerca dove hanno problemi e cosa sembra confonderli / infastidirli maggiormente.

Answer 5

Dipende per campo. Ma per qualcosa di simile a un numero di telefono, è generalmente abbastanza bello impedire a qualcuno di inserire anche cifre diverse.

In questo modo, durante la digitazione noterai che il tuo numero di telefono 1-800-HELLOWORLD non viene visualizzato correttamente e ti rendi conto che il campo accetta solo numeri (che puoi anche evidenziare con una sorta di campo di informazioni accanto all'input campo).

Questo mi sembra molto più intuitivo e amichevole di un dialogo modale imbarazzante, campo di errore pop-down o messaggio generato dal server che visualizza dopo che hai finito di compilarlo.

Ovviamente, bilanciare sempre la validazione lato client finale con i requisiti tecnici finali per costruirla. Se inizi, ad esempio, a convalidare i caricamenti di immagini con Ajax prima dell'invio della pagina, questa può essere una strada piuttosto lunga.

Modifica: considera anche il tuo pubblico. I più tecnicamente preparati accetteranno maggiormente la "dinamica" forme che, ad esempio, le persone che sono più abituate all'approccio non Ajax a Internet.

Answer 6

Personalmente penso che la formattazione e la convalida all'uscita siano le meno fastidiose per l'utente. Lascia che inseriscano il numero nel formato che preferiscono (e ce ne sono molti per un numero di telefono), quindi modificalo nel formato che preferisci. Non forzare l'utente a conformarsi alle tue preferenze quando puoi gestire i dati nel loro formato preferito.

Inoltre, i messaggi di convalida quando non ho finito di scrivere sono fastidiosi e non poter inserire un certo carattere in un campo di testo è super fastidioso.

L'unica eccezione che mi viene in mente è " è questo valore disponibile " situazioni (come la creazione di un nome utente univoco) - in tal caso il feedback immediato è davvero conveniente.

Answer 7

Trovo che le prime tre opzioni siano davvero fastidiose. Non c'è niente di peggio che essere interrotti nel mezzo della digitazione di qualcosa.

L'obiettivo principale del tuo utente è passare attraverso il modulo il più velocemente possibile e tutto ciò che fai che li rallenta è solo un motivo in più per rinunciarci completamente.

Odio anche essere costretto a digitare qualcosa come una carta di credito # o il numero di telefono è esattamente il formato giusto per soddisfare il modulo. Quando possibile, basta dare all'utente una casella in cui digitare le cose e non farle gestire la formattazione.

Nel caso del tuo numero di telefono, lascia che entrino come preferiscono, togli tutto ciò che non ti piace, prova a rimetterlo nel formato che desideri ((124) 567-8901) e lancia un errore se non puoi.

Se devi assolutamente convalidare qualcosa in un formato specifico, fallo quando inviano il modulo e quindi evidenzia i campi che hanno problemi.

Answer 8

Il modo più intuitivo che ho visto per eseguire la convalida è di avere un indicatore che appare accanto al campo di input per indicare che il valore non è valido. In questo modo non si interrompe l'utente mentre sta digitando e tuttavia può continuamente vedere se ha digitato o meno una voce valida. Odio dover digitare le informazioni in una forma lunga solo per farmi dire la cosa alla fine "Oh, devi tornare indietro e correggere il campo 1".

È possibile mostrare / nascondere l'indicatore mentre l'utente digita. Uso un'icona di avviso quando il valore non è valido e imposto una descrizione dell'icona che spiega perché il valore non è valido.

Se hai lo schermo immobiliare, puoi semplicemente inserire testo come " Valido " oppure " Deve essere nel formato XXX-YYY-XXXX " ;.

Tieni presente che quando esegui la convalida della sequenza di tasti devi anche catturare il testo incollato.

In aggiunta a ciò, dovresti anche impedire l'immissione di tasti non validi in primo luogo.

Answer 9

Per le migliori pratiche di usabilità, suggerisco di leggere How To Progetta la forma perfetta (più precisamente Context & amp; Assistance ) e Beautiful Forms .

Per un framework di convalida dei moduli, controlla fValidator e iMask combo, sono complementari e quindi funzionano perfettamente insieme.