Configurarea și validarea butoanelor radio

Configurarea și validarea butoane radio pare a fi câmp formular asta oferă multor webmasteri cea mai mare dificultate în configurare. În realitate, configurarea acestor câmpuri este cea mai simplă dintre toate câmpurile de formular pentru a valida, deoarece butoanele radio setează o valoare care trebuie testată doar la trimiterea formularului.

Dificultatea cu butoanele radio este că există cel puțin două câmpuri și, de obicei, mai multe care trebuie să fie plasate pe formular, legate între ele și testate ca un singur grup. Cu condiția să utilizați convențiile și aspectul corect pentru denumire pentru butoanele dvs., nu veți avea probleme.

Primul lucru la care trebuie să ne uităm când folosim butoanele radio din formularul nostru este modul în care butoanele trebuie codificate pentru a putea funcționa corect ca butoane radio. Comportamentul dorit pe care îl dorim este să avem selectat un singur buton simultan; când este selectat un buton, atunci orice buton selectat anterior va fi deselectat automat.

Soluția aici este de a da tuturor butoanelor radio din grup același nume, dar valori diferite. Iată codul folosit pentru butonul radio în sine.

Crearea mai multor grupuri de butoane radio pentru o singură formă este, de asemenea, simplă. Tot ce trebuie să faceți este să oferiți celui de-al doilea grup de butoane radio cu un nume diferit de cel folosit pentru primul grup.

Câmpul nume determină grupul din care face parte un anumit buton. Valoarea care va fi transmisă pentru un anumit grup atunci când este trimis formularul va fi valoarea butonului din grupul care este selectat la momentul transmiterii formularului.

Pentru ca persoana care completează formularul să înțeleagă ce face fiecare buton radio din grupul nostru, trebuie să oferim descrieri pentru fiecare buton. Cel mai simplu mod de a face acest lucru este de a oferi o descriere ca text imediat după buton.

Există doar câteva probleme cu utilizarea unui text simplu, cu toate acestea:

1. Textul poate fi asociat vizual cu butonul radio, dar este posibil să nu fie clar pentru unii care folosesc cititori de ecran, de exemplu.
2. În cele mai multe interfețe de utilizator folosind butoanele radio, textul asociat butonului poate face clic și poate selecta butonul radio asociat. În cazul nostru aici, textul nu va funcționa în acest mod decât dacă textul este asociat în mod specific cu butonul.

Pentru a asocia textul cu butonul radio corespunzător, astfel încât făcând clic pe text să selectăm acel buton, trebuie să efectuați o completare suplimentară a codului pentru fiecare buton înconjurând întregul buton și textul asociat în cadrul unei eticheta.

Iată cum ar arăta HTML-ul complet pentru unul dintre butoane:

 butonul unu

Ca buton radio cu numele de ID menționat în pentru parametrul etichetei este de fapt conținut în etichetă în sine, pentru și id parametrii sunt redundanți în unele browsere. Cu toate acestea, browserele lor nu sunt suficient de inteligente pentru a recunoaște cuibărirea, de aceea merită să le introduceți pentru a maximiza numărul de browsere în care va funcționa codul.

Aceasta completează codificarea butoanelor de radio în sine. Ultimul pas este să configurați validarea butoanelor radio folosind JavaScript.

Validarea grupurilor de butoane radio poate să nu fie evidentă, dar este simplă odată ce știi cum.

Următoarea funcție va valida faptul că unul dintre butoanele radio dintr-un grup a fost selectat:

// Validarea butoanelor radio
// copyright Stephen Chapman, 15 nov 2004, 14 septembrie 2005
// puteți copia această funcție, dar vă rugăm să păstrați cu ea notificarea de copyright
funcție valButton (btn) {
var cnt = -1;
for (var i = btn.length-1; i> -1; i--) {
if (btn [i]. verificat) {cnt = i; i = -1;}
}
if (cnt> -1) return btn [cnt] .value;
altfel se întoarce nul;
}

Pentru a utiliza funcția de mai sus, sunați-o din rutina de validare a formularului și treceți numele grupului de butoane radio. Acesta va returna valoarea butonului din grupul selectat sau va returna o valoare nulă dacă nu este selectat niciun buton din grup.

De exemplu, aici este codul care va efectua validarea butoanelor radio:

var btn = valButton (form.group1);
if alertă (btn == null) ('Nu a fost selectat butonul radio');
else alert ('Valoarea butonului' + btn + 'selectat');

Acest cod a fost inclus în funcția numită de un onClick eveniment atașat la butonul validare (sau trimitere) din formular.

O referință la întregul formular a fost transmisă ca parametru în funcție, care folosește argumentul „formular” pentru a face referire la formularul complet. Pentru a valida grupul de butoane radio cu grupul de nume1, prin urmare, trecem form.group1 la funcția valButton.

Toate grupurile de butoane radio de care aveți nevoie vreodată pot fi gestionate folosind pașii de mai sus.