JavaScript: comprendere la differenza tra eventi nella validazione inline dei form

JavaScript: comprendere la differenza tra eventi nella validazione inline dei form

La differenza esistente in JavaScript tra gli eventi legati ai campi dei form trova la sua applicazione più concreta nella user experience della validazione inline.

Se si utilizza l'evento keyup su un campo per effettuare la validazione inline, si deve tenere presente che si sta operando con valori parziali. Infatti l'utente non ha ancora riempito completamente il campo, quindi se ad esempio si sta validando un indirizzo e-mail, mostrare un messaggio di errore mentre l'utente sta ancora digitando può risultare fuorviante e fastidioso.

In questo caso invece è più utile per l'utente sapere se sta inserendo caratteri non validi. Se ad esempio si sta inserendo il proprio nome e per errore si digita un numero, in questo caso andrebbe evidenziato il fatto che il campo in questione non può contenere numeri o, tornando all'esempio dell'e-mail, informare l'utente che un dato carattere non è ammesso in un indirizzo e-mail.

Quando un campo perde il focus, al contrario, si innesca l'evento blur. In questo caso è corretto ad esempio validare completamente un indirizzo e-mail, perché l'utente ha proseguito nella compilazione del form e quindi non sta più modificando il valore di quel campo.

La validazione inline dovrebbe tener conto del fatto che nella compilazione di un form si alternano azioni e pause da parte dell'utente e che il codice JavaScript che andremo ad implementare dovrebbe tener conto di questa alternanza ed intervenire solo quando è opportuno farlo.

Torna su