Opsætning og validering af radioknapper

Opsætning og validering af radioknapper ser ud til at være form felt der giver mange webmastere mest vanskeligheder med at opsætte. Faktisk er opsætningen af ​​disse felter den mest enkle af alle formularfelter at validere, da radioknapper indstiller en værdi, der kun skal testes, når formularen indsendes.

Problemer med radioknapper er, at der er mindst to og normalt flere felter, der skal placeres på formularen, relateres sammen og testes som en gruppe. Forudsat at du bruger de rigtige navnekonventioner og layout til dine knapper, har du ingen problemer.

Den første ting, man skal se på, når man bruger radioknapper på vores form, er, hvordan knapperne skal kodes, for at de skal fungere korrekt som radioknapper. Den ønskede opførsel, vi ønsker, er kun at vælge en knap ad gangen; Når der vælges en knap, fjernes enhver tidligere valgt knap automatisk.

Løsningen her er at give alle radioknapper i gruppen det samme navn men forskellige værdier. Her er koden, der bruges til selve radioknappen.

Oprettelsen af ​​flere grupper af radioknapper til den ene form er også ligetil. Alt hvad du skal gøre er at give den anden gruppe radioknapper et andet navn end det, der blev brugt til den første gruppe.

Navnefeltet bestemmer, hvilken gruppe en bestemt knap tilhører. Den værdi, der overføres for en bestemt gruppe, når formularen indsendes, er værdien på knappen i gruppen, der er valgt på det tidspunkt, hvor formularen indsendes.

For at personen, der udfylder formularen, skal forstå, hvad hver radioknap i vores gruppe gør, er vi nødt til at give beskrivelser for hver knap. Den enkleste måde at gøre dette på er at give en beskrivelse som tekst umiddelbart efter knappen.

Der er dog et par problemer med bare at bruge almindelig tekst, dog:

1. Teksten er visuelt knyttet til radioknappen, men det er måske ikke klart for nogle, der f.eks. Bruger skærmlæsere.
2. I de fleste brugergrænseflader ved hjælp af radioknapper kan teksten, der er knyttet til knappen, klikkes og kan vælge den tilknyttede radioknap. I vores tilfælde her fungerer teksten ikke på denne måde, medmindre teksten specifikt er knyttet til knappen.

For at knytte teksten til den tilhørende radioknap, så vi skal gøre det ved at klikke på teksten tilføje en yderligere tilføjelse til koden for hver knap ved at omgi hele knappen og den tilhørende tekst inden for en etiket.

Sådan ser den komplette HTML for en af ​​knapperne ud:

 knap en

Som radioknap med det id-navn, der er nævnt i til parameter for etiketmærket er faktisk indeholdt i selve mærket, the til og id parametre er overflødige i nogle browsere. Deres browsere er imidlertid ofte ikke smarte nok til at genkende reden, så det er værd at placere dem i for at maksimere antallet af browsere, hvor koden fungerer.

Dette afslutter kodningen af ​​radioknapperne i sig selv. Det sidste trin er at konfigurere validering af alternativknappen vha JavaScript.

Validering af grupper af radioknapper er muligvis ikke indlysende, men det er ligetil, når du ved hvordan.

Følgende funktion validerer, at en af ​​radioknapperne i en gruppe er valgt:

// Validering af radioknap
// copyright Stephen Chapman, 15. november 2004, 14. september 2005
// Du kan kopiere denne funktion, men hold venligst ophavsretten med det
funktion valButton (btn) {
var cnt = -1;
for (var i = btn.length-1; i> -1; i--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
hvis (cnt> -1) returnerer btn [cnt] .værdi;
ellers returnere null;
}

For at bruge den ovenstående funktion skal du ringe til den fra din formularvalideringsrutine og videregive den radioknapgruppens navn. Det returnerer værdien på knappen i den valgte gruppe, eller returnerer en nulværdi, hvis der ikke er valgt en knap i gruppen.

Her er for eksempel koden, der udfører validering af alternativknappen:

var btn = valButton (form.group1);
hvis (btn == null) alarm ('Ingen radioknap valgt');
andet alarm ('Knapværdi' + btn + 'valgt');

Denne kode blev inkluderet i den funktion, der kaldes af en onClick begivenhed knyttet til valideringsknappen (eller indsend) -knappen på formularen.

En henvisning til hele formularen blev sendt som en parameter i funktionen, der bruger "form" -argumentet til at henvise til den komplette formular. For at validere radioknapgruppen med navnegruppen1 videresender vi derfor form.group1 til valButton-funktionen.

Alle de radioknapgrupper, du nogensinde har brug for, kan håndteres ved hjælp af ovenstående trin.