Настройка и валидиране на радио бутони

Настройката и валидирането на радио бутони изглежда е поле за форма което създава много уебмастъри най-много трудности при настройването. Всъщност настройката на тези полета е най-простата от всички полета на формуляра, за да се валидира, тъй като радио бутоните задават една стойност, която трябва да бъде тествана само при подаване на формата.

Трудността с радио бутоните е, че има поне две и обикновено повече полета, които трябва да бъдат поставени във формата, свързани заедно и тествани като една група. При условие че използвате правилните конвенции за именуване и оформление за бутоните, няма да имате никакви проблеми.

Първото нещо, което трябва да разгледаме, когато използваме радио бутоните в нашата форма, е как бутоните трябва да бъдат кодирани, за да функционират правилно като радио бутони. Желаното поведение, което искаме, е да имаме само един бутон, избран наведнъж; когато е избран един бутон, всеки предварително избран бутон ще бъде автоматично отменен.

Решението тук е да дадем на всички радио бутони в групата едно и също име, но различни стойности. Ето кода, използван за самия радио бутон.

Създаването на множество групи радио бутони за едната форма също е ясно. Всичко, което трябва да направите, е да предоставите на втората група радио бутони с различно име от това, използвано за първата група.

Полето за име определя коя група принадлежи на определен бутон. Стойността, която ще бъде предадена за конкретна група, когато формулярът бъде изпратен, ще бъде стойността на бутона в групата, който е избран в момента на подаване на формата.

За да може човекът, попълващ формуляра, да разбере какво прави всеки радио бутон в нашата група, трябва да предоставим описания за всеки бутон. Най-простият начин да направите това е да предоставите описание като текст веднага след бутона.

Има обаче няколко проблема с използването само на обикновен текст:

1. Текстът може да бъде визуално асоцииран с радио бутона, но може да не е ясно на някои, които използват екранен четец, например.
2. В повечето потребителски интерфейси използвайки радио бутони, текстът, свързан с бутона, може да се кликва и да може да избере свързания с него бутон. В нашия случай тук текстът няма да работи по този начин, освен ако текстът не е специално свързан с бутона.

За да свържем текста със съответния радио бутон, така че щракването върху текста да избере този бутон, ние трябва да направи допълнително допълнение към кода за всеки бутон, като заобиколи целия бутон и свързания с него текст в рамките на етикет.

Ето как би изглеждал пълният HTML за един от бутоните:

 бутон един

Като радио бутон с идентификационното име, посочено в за параметърът на етикета на етикета всъщност се съдържа в самия маркер, за и документ за самоличност параметрите са излишни в някои браузъри. Браузърите им обаче често не са достатъчно умни, за да разпознаят влагането, така че си струва да ги въведете, за да увеличите максимално броя на браузърите, в които кодът ще функционира.

Това завършва кодирането на самите радио бутони. Последната стъпка е да настроите валидирането на радио бутоните, като използвате JavaScript.

Валидирането на групи от радио бутони може да не е очевидно, но е ясно, след като разберете как.

Следващата функция ще потвърди, че е избран един от радио бутоните в група:

// Валидиране на радио бутона
// авторски права Стивън Чапман, 15 ноември 2004, 14 септември 2005 г.
// можете да копирате тази функция, но моля, запазете известието за авторски права с нея
функция valButton (btn) {
var cnt = -1;
за (var i = btn.length-1; i> -1; аз--) {
ако (btn [i]. проверено) {cnt = i; i = -1;}
}
ако (cnt> -1) върнете btn [cnt]. стойност;
в противен случай върнете нула;
}

За да използвате горната функция, извикайте я от рутината за валидиране на формуляра и я предайте името на групата с радио бутони. Той ще върне стойността на бутона в избраната група или ще върне нулева стойност, ако не е избран бутон в групата.

Например, тук е кодът, който ще извърши проверката на радио бутона:

var btn = valButton (form.group1);
ако (btn == null) сигнал („Няма избран радио бутон“);
друго предупреждение ('Стойност на бутона' + btn + 'избрано');

Този код беше включен във функцията, наречена от OnClick събитие, прикрепено към бутона за валидиране (или изпращане) във формата.

Препратка към целия формуляр беше предаден като параметър във функцията, който използва аргумента "form", за да се отнася до пълния формуляр. За да утвърдим групата с бутони с имената group1, следователно предаваме form.group1 към функцията valButton.

Всички групи от бутони, които някога ще ви трябват, могат да се обработват с помощта на описаните по-горе стъпки.