Konfigurowanie i sprawdzanie poprawności przycisków radiowych

Konfiguracja i sprawdzanie poprawności przyciski radiowe wydaje się być pole formularza daje to wielu webmasterom największe trudności z konfiguracją. W rzeczywistości konfiguracja tych pól jest najprostszym ze wszystkich pól formularza do sprawdzenia poprawności, ponieważ przyciski radiowe ustawiają jedną wartość, którą należy przetestować tylko po przesłaniu formularza.

Trudność z przyciskami opcji polega na tym, że istnieją co najmniej dwa i zwykle więcej pól, które należy umieścić w formularzu, powiązane ze sobą i przetestowane jako jedna grupa. Pod warunkiem, że użyjesz prawidłowych konwencji nazewnictwa i układu przycisków, nie będziesz mieć problemów.

Skonfiguruj grupę przycisków radiowych

Pierwszą rzeczą, na którą należy zwrócić uwagę podczas używania przycisków opcji w naszym formularzu, jest to, jak należy je zakodować, aby działały poprawnie jako przyciski opcji. Pożądanym zachowaniem, które chcemy, jest wybranie tylko jednego przycisku na raz; po wybraniu jednego przycisku, każdy wcześniej wybrany przycisk zostanie automatycznie odznaczony.

instagram viewer

Rozwiązaniem tutaj jest nadanie wszystkim przyciskom opcji w grupie tej samej nazwy, ale różnych wartości. Oto kod używany dla samego przycisku opcji.




Tworzenie wielu grup przycisków opcji dla jednej formy jest również proste. Wszystko, co musisz zrobić, to podać drugiej grupie przycisków opcji inną nazwę niż ta, która była używana w pierwszej grupie.

Pole nazwy określa, do której grupy należy dany przycisk. Wartość, która zostanie przekazana do określonej grupy po przesłaniu formularza, będzie wartością przycisku w grupie wybranej w momencie przesłania formularza.

Opisz każdy przycisk

Aby osoba wypełniająca formularz zrozumiała, co robi każdy przycisk radiowy w naszej grupie, musimy podać opisy każdego przycisku. Najprostszym sposobem na to jest podanie opisu jako tekstu bezpośrednio po przycisku.

Istnieje jednak kilka problemów z używaniem zwykłego tekstu:

  1. Tekst może być wizualnie powiązany z przyciskiem opcji, ale dla niektórych osób korzystających z czytników ekranu może być niejasny.
  2. W większości interfejsy użytkownika za pomocą przycisków opcji tekst powiązany z przyciskiem można kliknąć i wybrać odpowiedni przycisk opcji. W naszym przypadku tekst nie będzie działał w ten sposób, chyba że będzie on powiązany z przyciskiem.

Kojarzenie tekstu z przyciskiem opcji

Aby powiązać tekst z odpowiadającym mu przyciskiem radiowym, aby kliknięcie tekstu wybrało ten przycisk, musimy to zrobić dodaj kolejny kod do każdego przycisku, otaczając cały przycisk i związany z nim tekst w ciągu etykieta.

Oto jak wyglądałby pełny kod HTML jednego z przycisków:



Jako przycisk opcji o nazwie identyfikatora, o której mowa w dla parametr znacznika etykiety jest faktycznie zawarty w samym znaczniku, dla i ID parametry są nadmiarowe w niektórych przeglądarkach. Jednak ich przeglądarki często nie są wystarczająco inteligentne, aby rozpoznać zagnieżdżenie, dlatego warto je umieścić, aby zmaksymalizować liczbę przeglądarek, w których kod będzie działał.

To kończy kodowanie samych przycisków opcji. Ostatnim krokiem jest skonfigurowanie sprawdzania poprawności przycisku opcji za pomocą JavaScript.

Skonfiguruj sprawdzanie poprawności przycisku radiowego

Sprawdzanie poprawności grup przycisków opcji może nie być oczywiste, ale jest to proste, gdy wiesz, jak to zrobić.

Poniższa funkcja sprawdzi, czy jeden z przycisków opcji w grupie został wybrany:

// Walidacja przycisku radiowego
// prawa autorskie Stephen Chapman, 15 listopada 2004,14 września 2005
// możesz skopiować tę funkcję, ale zachowaj przy niej informację o prawach autorskich
funkcja valButton (btn) {
var cnt = -1;
dla (var i = btn.length-1; i> -1; ja--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
if (cnt> -1) zwraca btn [cnt] .value;
w przeciwnym razie zwróci null;
}

Aby użyć powyższej funkcji, wywołaj ją z poziomu procedury sprawdzania poprawności formularza i przekaż nazwę grupy przycisków opcji. Zwróci wartość przycisku w wybranej grupie lub zwróci wartość zerową, jeśli nie zostanie wybrany żaden przycisk w grupie.

Na przykład, oto kod, który wykona sprawdzenie przycisku opcji:

var btn = valButton (form.group1);
alert (btn == null) („Nie wybrano przycisku opcji”);
w przeciwnym razie alert („Wartość przycisku” + btn + „wybrano”);

Ten kod został włączony do funkcji wywoływanej przez na kliknięcie zdarzenie dołączone do przycisku sprawdzania poprawności (lub przesłania) w formularzu.

Odwołanie do całego formularza zostało przekazane jako parametr do funkcji, która używa argumentu „form” do odwołania się do pełnego formularza. Aby sprawdzić poprawność grupy przycisków opcji o nazwie group1, przekazujemy zatem form.group1 do funkcji valButton.

Wszystkie grupy przycisków opcji, których będziesz kiedykolwiek potrzebować, można obsłużyć, wykonując czynności opisane powyżej.

instagram story viewer