Come convalidare il pulsante di radio usando JavaScript

Un pulsante di opzione è un tipo di elemento grafico o icona che consente all'utente di selezionare un'opzione/scelta da un set di opzioni. Gli sviluppatori convalidano i pulsanti di radio per garantire che l'utente abbia selezionato un'opzione prima di inviare il modulo. Supponiamo che nessuna opzione sia controllata e provi a inviare il modulo. In quello scenario, verrà lanciato un errore. Può aiutare a migliorare l'esperienza dell'utente avvisando l'utente per mostrare errori durante l'invio di moduli senza selezionare l'opzione nei pulsanti di radio.

Questo post dimostrerà la procedura per convalidare i pulsanti di radio in JavaScript.

Come convalidare il pulsante di radio usando JavaScript?

Usa il "controllato"Proprietà dell'elemento del pulsante di opzione per la convalida di un pulsante di opzione utilizzando JavaScript. Dà un valore booleano "VERO"Se il pulsante di opzione è selezionato/controllato, se fornisce"falso", Significa che il pulsante di opzione è"non controllato".

Sintassi

La seguente sintassi viene utilizzata per convalidare se il pulsante di opzione è selezionato:

radioobject.controllato

Esempio

Nel seguente esempio, vedremo la convalida del pulsante di opzione in due passaggi:

• Crea pulsanti di radio in forma
• Convalida i pulsanti radio

Passaggio 1: creare pulsanti di radio in forma

Crea un modulo con pulsanti di radio che consente di selezionare l'opzione per apprendere la lingua specifica. Allega il "al clic"Evento con il pulsante di invio che chiama il"convalida ()" funzione:

Seleziona la lingua che desideri imparare


Html

CSS

JavaScript

Nodejs

Passaggio 2: convalidare il pulsante di opzione

Definire una funzione "convalida"Ciò attiverà il clic del pulsante di invio per verificare se viene selezionata o meno un'opzione:

convalida della funzione ()

var lingua = documento.modulo.lang;
per (var i = 0; i < language.length; i++)
if (lingua [i].controllato)
rottura;


if (i == lingua.lunghezza)
Documento di ritorno.getElementById ("Errore").InnerHtml = "Controlla qualsiasi pulsante di opzione";

Documento di ritorno.getElementById ("Errore").InnerHtml = "Seleziona opzione" + (i + 1);

Nello snippet sopra:

• Innanzitutto, ottieni tutti i pulsanti di opzione usando il nome assegnato con l'aiuto di "modulo.Lang".
• Quindi, itera i pulsanti di opzione fino alla loro lunghezza e controlla se il pulsante è controllato o meno, usando "controllato" proprietà.
• Se vengono controllati i pulsanti di opzione, rompere il loop.
• Se nessuno dei pulsanti è selezionato, mostra un messaggio di errore "Si prega di controllare qualsiasi pulsante di opzione".

Produzione

Questo è tutto per il pulsante di radio convalida in JavaScript.

Conclusione

Per convalidare il pulsante di opzione in JavaScript, utilizzare il “controllato" proprietà. Controllerà se il pulsante è selezionato o meno e fornisce un valore booleano nelle condizioni controllate o non controllate. Questo post ha dimostrato la procedura per convalidare i pulsanti di radio in JavaScript.