Ställa in och validera radioknappar

Inställning och validering av radioknappar verkar vara formfält som ger många webbansvariga de svåraste att installera. I själva verket är installationen av dessa fält den enklaste av alla formulärfält att validera som radioknappar ställer in ett värde som endast behöver testas när formuläret skickas in.

Svårigheten med radioknapparna är att det finns minst två och vanligtvis fler fält som måste placeras på formuläret, relaterade tillsammans och testas som en grupp. Förutsatt att du använder rätt namnkonventioner och layout för dina knappar kommer du inte att ha några problem.

Det första man ska titta på när man använder radioknappar i vårt formulär är hur knapparna måste kodas för att de ska fungera som radioknappar. Det önskade beteendet vi vill ha är att endast en knapp väljs åt gången; när en knapp väljs kommer alla tidigare valda knappar att avmarkeras automatiskt.

Lösningen här är att ge alla radioknappar inom gruppen samma namn men olika värden. Här är koden som används för själva radioknappen.

Skapandet av flera grupper av radioknappar för den ena formen är också enkelt. Allt du behöver göra är att förse den andra gruppen med radioknappar med ett annat namn än det som användes för den första gruppen.

Namnfältet avgör vilken grupp som en viss knapp tillhör. Värdet som kommer att skickas för en specifik grupp när formuläret skickas in är värdet på knappen inom gruppen som väljs vid tidpunkten då formuläret skickas in.

För att personen som fyller i formuläret ska förstå vad varje radioknapp i vår grupp gör, måste vi ange beskrivningar för varje knapp. Det enklaste sättet att göra detta är att tillhandahålla en beskrivning som text direkt efter knappen.

Det finns ett par problem med att bara använda vanlig text:

1. Texten kan vara visuellt associerad med alternativknappen, men det kanske inte är klart för vissa som till exempel använder skärmläsare.
2. I de flesta användargränssnitt med hjälp av radioknappar, är texten associerad med knappen klickbar och kan välja den tillhörande alternativknappen. I vårt fall här kommer texten inte att fungera på detta sätt om inte texten är specifikt associerad med knappen.

För att associera texten med motsvarande alternativknapp så att vi klickar på texten för att välja den knappen göra ytterligare ett tillägg till koden för varje knapp genom att omge hela knappen och dess tillhörande text i en märka.

Så här ser HTML-kod för en av knapparna ut:

 knapp en

Som radioknapp med ID-namnet som anges i för parametern för etiketttaggen finns faktiskt i själva taggen, för och id parametrar är överflödiga i vissa webbläsare. Deras webbläsare är dock ofta inte tillräckligt smarta för att känna igen boet, så det är värt att lägga in dem för att maximera antalet webbläsare där koden kommer att fungera.

Det slutför kodningen av själva radioknapparna. Det sista steget är att ställa in validering av alternativknappen med JavaScript.

Validering av grupper av radioknappar är kanske inte uppenbart, men det är enkelt när du vet hur.

Följande funktion validerar att en av radioknapparna i en grupp har valts:

// Radioknappvalidering
// copyright Stephen Chapman, 15 nov 2004,14 september 2005
// Du kan kopiera den här funktionen men behåll upphovsrättsmeddelandet med den
funktion valButton (btn) {
var cnt = -1;
för (var i = btn.length-1; i> -1; i--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
om (cnt> -1) returnera btn [cnt] .värde;
annars returnera null;
}

Om du vill använda funktionen ovan kan du ringa den från din formulärvalideringsrutin och skicka den till gruppknappen. Det kommer att returnera värdet på knappen inom den valda gruppen, eller returnera ett nullvärde om ingen knapp i gruppen är vald.

Här är till exempel koden som utför validering av alternativknappen:

var btn = valButton (form.group1);
if (btn == null) varning ('Ingen radioknapp vald');
annars varning ('Knappvärde' + btn + 'vald');

Denna kod ingick i den funktion som anropas av en onClick händelse bifogat validera (eller skicka) -knappen på formuläret.

En referens till hela formuläret skickades som en parameter till funktionen, som använder "formulär" -argumentet för att hänvisa till det kompletta formuläret. För att validera radioknappsgruppen med namngruppen1 överför vi därför form.group1 till valButton-funktionen.

Alla radioknappgrupper som du någonsin kommer att behöva kan hanteras med hjälp av stegen ovan.