JavaScript

Rispondere agli eventi del modulo

Puoi utilizzare JavaScript per rispondere alle interazioni degli utenti sul modulo, visualizzare altri campi del modulo, inviare un modulo e molto altro ancora.

Aiuta gli utenti a compilare ulteriori controlli del modulo

Immagina di aver creato un modulo per il sondaggio. Dopo che un utente ha selezionato un'opzione, vuoi mostrare altri <input> per porre una domanda specifica relativa alla selezione. Come puoi mostrare solo l'elemento <input> pertinente?

Puoi utilizzare JavaScript per mostrare un <input> solo quando il <input type="radio"> associato è attualmente selezionato.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Diamo un'occhiata al codice JavaScript della demo. Hai notato gli attributi aria-controls e aria-expanded? Utilizza questi attributi ARIA per aiutare gli utenti di screen reader a capire quando un controllo modulo aggiuntivo viene mostrato o nascosto.

Assicurati che gli utenti possano inviare un modulo senza uscire da una pagina

Immagina di avere un modulo per i commenti. Quando un lettore aggiunge un commento e invia il modulo, sarebbe l'ideale se potesse vedere immediatamente il commento senza aggiornare la pagina.

A questo scopo, ascolta l'evento onsubmit, quindi utilizza event.preventDefault() per impedire il comportamento predefinito e invia FormData utilizzando l'API Fetch.

Supporto dei browser

  • 42
  • 14
  • 39
  • 10.1

Fonte

Lo script di backend può controllare se una richiesta POST sembra provenire dal browser (utilizzando l'attributo action di un elemento modulo, dove method="post") o da JavaScript, ad esempio una richiesta fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Comunica sempre agli utenti di screen reader le modifiche ai contenuti dinamici. Aggiungi un elemento con l'attributo aria-live="polite" al codice HTML e aggiorna i contenuti dell'elemento dopo una modifica. Ad esempio, aggiorna il testo in "Il tuo commento è stato pubblicato correttamente", dopo che un utente ha inviato un commento.

Scopri di più sulle regioni pubblicate ARIA.

Convalida con JavaScript

Assicurati che i messaggi di errore siano in linea con lo stile e il tono del tuo sito

La formulazione dei messaggi di errore predefiniti varia a seconda del browser. Come puoi assicurarti che lo stesso messaggio venga mostrato a tutti gli utenti e che sia in linea con lo stile e il tono del tuo sito? Utilizza il metodo setCustomValidity() dell'API Constraint Validation per definire i tuoi messaggi di errore.

Assicurati che gli utenti vengano informati degli errori in tempo reale

Le funzionalità HTML integrate per la convalida del modulo sono ideali per avvisare gli utenti dei campi non validi prima che i dati vengano inviati al backend. Non sarebbe bello inviare una notifica agli utenti non appena escono dal campo di un modulo?

Ascolta l'evento blur che si attiva quando un elemento perde lo stato attivo e utilizza l'interfaccia ValidityState per rilevare se un controllo modulo non è valido.

Assicurati che gli utenti possano vedere la password che hanno inserito

Il testo inserito per <input type="password"> è oscurato per impostazione predefinita, per rispettare la privacy degli utenti. Aiuta gli utenti a inserire la password, mostrando un <button> per attivare/disattivare la visibilità del testo inserito.

Prova la demo. Attiva/disattiva la visibilità del testo inserito utilizzando l'<button> Mostra password. Come funziona? Se fai clic su Mostra password, l'attributo type del campo password viene modificato da type="password" a type="text", mentre il testo <button> diventa "Nascondi password".

È importante rendere accessibile il pulsante Mostra password. Collega <button> a <input type="password"> utilizzando l'attributo aria-controls.

Per informare gli utenti di screen reader se la password è attualmente mostrata o nascosta, utilizza un elemento nascosto con aria-live="polite" e modifica il testo di conseguenza. È importante consentire agli utenti di screen reader di sapere quando viene visualizzata una password e visibile a qualcun altro che guarda lo schermo.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Scopri di più sull'implementazione di un'opzione di visualizzazione della password.

Risorse