Sette opp og validere radioknapper

Oppsett og validering av radioknapper ser ut til å være skjemafelt som gir mange webansvarlige de vanskeligste ved å konfigurere. Faktisk er oppsettet av disse feltene det enkleste av alle skjemafelt å validere, da radioknapper setter en verdi som bare må testes når skjemaet sendes inn.

Vanskeligheten med radioknapper er at det er minst to og vanligvis flere felt som må plasseres på skjemaet, relateres sammen og testes som en gruppe. Forutsatt at du bruker riktige navnekonvensjoner og layout for knappene dine, har du ingen problemer.

Den første tingen å se på når du bruker radioknapper på skjemaet vårt, er hvordan knappene må kodes for at de skal fungere som radioknapper. Den ønskede oppførselen vi ønsker er å bare velge en knapp om gangen; Når en knapp er valgt, vil alle tidligere valgte knapper automatisk bli valgt bort.

Løsningen her er å gi alle radioknappene i gruppen samme navn, men forskjellige verdier. Her er koden som brukes til radioknappen selv.

Opprettelsen av flere grupper av radioknapper for den ene formen er også grei. Alt du trenger å gjøre er å gi den andre gruppen med radioknapper et annet navn enn det som ble brukt for den første gruppen.

Navnefeltet bestemmer hvilken gruppe en bestemt knapp tilhører. Verdien som vil bli gitt til en bestemt gruppe når skjemaet sendes inn, er verdien på knappen i gruppen som er valgt på det tidspunktet skjemaet sendes inn.

For at personen som skal fylle ut skjemaet, skal forstå hva hver alternativknapp i gruppen vår gjør, må vi gi beskrivelser for hver knapp. Den enkleste måten å gjøre dette på er å gi en beskrivelse som tekst umiddelbart etter knappen.

Det er et par problemer med bare å bruke ren tekst, men:

1. Teksten kan være visuelt assosiert med alternativknappen, men det er kanskje ikke klart for noen som bruker skjermlesere, for eksempel.
2. I de fleste brukergrensesnitt ved hjelp av radioknapper, er teksten tilknyttet knappen klikkbar og kan velge den tilknyttede alternativknappen. I vårt tilfelle her vil ikke teksten fungere på denne måten med mindre teksten er spesielt knyttet til knappen.

For å knytte teksten til den tilhørende alternativknappen slik at vi klikker på teksten for å velge den knappen gi et ytterligere tillegg til koden for hver knapp ved å omgi hele knappen og den tilhørende teksten i en merkelapp.

Slik ser den komplette HTML for en av knappene ut:

 knapp en

Som alternativknapp med ID-navnet referert til i til parameteren til etikettmerket er faktisk inneholdt i selve koden, til og id parametere er overflødige i noen nettlesere. Nettleserne deres er imidlertid ofte ikke smarte nok til å gjenkjenne hekkingen, så det er verdt å legge dem inn for å maksimere antall nettlesere som koden vil fungere i.

Dette fullfører kodingen av radioknappene selv. Det siste trinnet er å sette opp validering av alternativknappen ved å bruke Javascript.

Validering av grupper av radioknapper er kanskje ikke opplagt, men det er greit når du vet hvordan.

Følgende funksjon bekrefter at en av alternativknappene i en gruppe er valgt:

// Validering av radioknapp
// copyright Stephen Chapman, 15. november 2004, 14. september 2005
// du kan kopiere denne funksjonen, men vær oppmerksom på copyright om den
funksjon valButton (btn) {
var cnt = -1;
for (var i = btn.length-1; i> -1; Jeg--) {
if (btn [i]. sjekket) {cnt = i; i = -1;}
}
hvis (cnt> -1) returner btn [cnt]. verdi;
ellers returnere null;
}

Hvis du vil bruke funksjonen ovenfor, kan du ringe den fra skjemavalideringsrutinen din og gi den radioknappenes gruppe navn. Det vil returnere verdien på knappen i gruppen som er valgt, eller returnere en nullverdi hvis ingen knapp i gruppen er valgt.

For eksempel er her koden som vil utføre valgknappen validering:

var btn = valButton (form.gruppe1);
if (btn == null) varsel ('Ingen radioknapp valgt');
annet varsel ('Knappverdi' + btn + 'valgt');

Denne koden ble inkludert i funksjonen som ble kalt av en ved trykk hendelse festet til valideringsknappen (eller send inn) på skjemaet.

En referanse til hele skjemaet ble sendt som en parameter inn i funksjonen, som bruker "skjema" -argumentet for å referere til det komplette skjemaet. For å validere alternativknappegruppen med navnegruppen1, overfører vi derfor form.group1 til valButton-funksjonen.

Alle alternativknappegruppene du noen gang trenger, kan håndteres ved å følge trinnene dekket over.