Het instellen en valideren van Radio knoppen lijkt de formulierveld dat geeft veel webmasters de meeste problemen bij het instellen. In feite is de instelling van deze velden de meest eenvoudige van alle formuliervelden om te valideren, aangezien keuzerondjes één waarde instellen die alleen hoeft te worden getest wanneer het formulier wordt verzonden.
Het probleem met keuzerondjes is dat er ten minste twee en meestal meer velden op het formulier moeten worden geplaatst, aan elkaar gerelateerd en als één groep moeten worden getest. Op voorwaarde dat u de juiste naamgevingsconventies en lay-out voor uw knoppen gebruikt, zult u geen problemen ondervinden.
Stel de keuzerondjesgroep in
Het eerste waar we op moeten letten bij het gebruik van keuzerondjes op ons formulier, is hoe de knoppen moeten worden gecodeerd om goed te kunnen functioneren als keuzerondjes. Het gewenste gedrag dat we willen is om slechts één knop tegelijk te selecteren; wanneer één knop is geselecteerd, wordt elke eerder geselecteerde knop automatisch gedeselecteerd.
De oplossing hier is om alle keuzerondjes binnen de groep dezelfde naam maar verschillende waarden te geven. Hier is de code die wordt gebruikt voor het keuzerondje zelf.
Het maken van meerdere groepen keuzerondjes voor één formulier is ook eenvoudig. Het enige dat u hoeft te doen, is de tweede groep keuzerondjes een andere naam te geven dan die voor de eerste groep.
Het naamveld bepaalt tot welke groep een bepaalde knop behoort. De waarde die wordt doorgegeven voor een specifieke groep wanneer het formulier wordt verzonden, is de waarde van de knop binnen de groep die is geselecteerd op het moment dat het formulier wordt verzonden.
Beschrijf elke knop
Om de persoon die het formulier invult te laten begrijpen wat elk keuzerondje in onze groep doet, moeten we beschrijvingen voor elke knop opgeven. De eenvoudigste manier om dit te doen is om een beschrijving als tekst te geven direct na de knop.
Er zijn echter een paar problemen met het gebruik van gewone tekst:
- De tekst kan visueel worden geassocieerd met het keuzerondje, maar het is misschien niet duidelijk voor sommigen die bijvoorbeeld schermlezers gebruiken.
- In de meeste gebruikersinterfaces met behulp van keuzerondjes kunt u op de tekst klikken die aan de knop is gekoppeld en het bijbehorende keuzerondje selecteren. In ons geval hier zal de tekst niet op deze manier werken tenzij de tekst specifiek aan de knop is gekoppeld.
Tekst koppelen aan een keuzerondje
Om de tekst aan het bijbehorende keuzerondje te koppelen, zodat klikken op de tekst die knop selecteert, moeten we dat doen maak een verdere toevoeging aan de code voor elke knop door de hele knop en de bijbehorende tekst te omringen binnen een etiket.
Dit is hoe de complete HTML voor een van de knoppen eruit zou zien:
Als het keuzerondje met de id-naam waarnaar wordt verwezen in de voor parameter van het label tag is eigenlijk opgenomen in de tag zelf, de voor en ID kaart parameters zijn overbodig in sommige browsers. Hun browsers zijn echter vaak niet slim genoeg om het nestelen te herkennen, dus het is de moeite waard om ze in te voeren om het aantal browsers te maximaliseren waarin de code zal werken.
Dat voltooit de codering van de radioknoppen zelf. De laatste stap is het instellen van de validatie van het keuzerondje met JavaScript.
Validatie van keuzerondjes instellen
Validatie van groepen keuzerondjes is misschien niet vanzelfsprekend, maar het is eenvoudig als u eenmaal weet hoe.
De volgende functie valideert dat een van de keuzerondjes in een groep is geselecteerd:
// Validatie van keuzerondjes
// copyright Stephen Chapman, 15 november 2004, 14 september 2005
// u mag deze functie kopiëren, maar houd hierbij de copyrightkennisgeving bij
functie valButton (btn) {
var cnt = -1;
voor (var i = btn.length-1; i> -1; i--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
if (cnt> -1) retourneer btn [cnt] .value;
anders keert u null terug;
}
Als u de bovenstaande functie wilt gebruiken, roept u deze aan vanuit uw formuliervalidatieroutine en geeft u deze de naam van de keuzerondjesgroep. Het retourneert de waarde van de knop binnen de geselecteerde groep, of retourneert een nulwaarde als er geen knop in de groep is geselecteerd.
Hier is bijvoorbeeld de code die de validatie van het keuzerondje uitvoert:
var btn = valButton (form.group1);
if (btn == null) alert ('Geen keuzerondje geselecteerd');
anders alert ('Knopwaarde' + btn + 'geselecteerd');
Deze code is opgenomen in de functie genaamd door een bij klikken evenement gekoppeld aan de knop Bevestigen (of verzenden) op het formulier.
Een verwijzing naar het hele formulier werd als parameter in de functie doorgegeven, die het argument 'formulier' gebruikt om naar het volledige formulier te verwijzen. Om de keuzerondjesgroep met de naam groep1 te valideren, geven we daarom form.group1 door aan de functie valButton.
Alle groepen keuzerondjes die u ooit nodig zult hebben, kunnen worden afgehandeld met behulp van de bovenstaande stappen.