Menyiapkan dan Memvalidasi Tombol Radio

Pengaturan dan validasi tombol radio tampaknya menjadi bidang formulir yang memberi banyak webmaster kesulitan dalam pengaturan. Pada kenyataannya, pengaturan bidang ini adalah yang paling sederhana dari semua bidang formulir untuk divalidasi karena tombol radio menetapkan satu nilai yang hanya perlu diuji ketika formulir dikirimkan.

Kesulitan dengan tombol radio adalah bahwa setidaknya ada dua dan biasanya lebih banyak bidang yang perlu ditempatkan pada formulir, terkait bersama dan diuji sebagai satu kelompok. Asalkan Anda menggunakan konvensi penamaan dan tata letak yang benar untuk tombol Anda, Anda tidak akan mengalami masalah.

Hal pertama yang harus dilihat ketika menggunakan tombol radio pada formulir kami adalah bagaimana tombol perlu dikodekan agar berfungsi dengan baik sebagai tombol radio. Perilaku yang diinginkan yang kita inginkan adalah memilih hanya satu tombol pada satu waktu; ketika satu tombol dipilih maka tombol yang dipilih sebelumnya akan secara otomatis tidak dipilih.

Solusinya di sini adalah memberi semua tombol radio dalam grup nama yang sama tetapi nilainya berbeda. Berikut adalah kode yang digunakan untuk tombol radio itu sendiri.

Pembuatan beberapa grup tombol radio untuk satu bentuk juga mudah. Yang perlu Anda lakukan adalah memberi kelompok kedua tombol radio dengan nama yang berbeda dengan yang digunakan untuk kelompok pertama.

Bidang nama menentukan grup mana yang dimiliki tombol tertentu. Nilai yang akan diteruskan untuk grup tertentu ketika formulir dikirimkan adalah nilai tombol di dalam grup yang dipilih pada saat formulir dikirimkan.

Agar orang yang mengisi formulir memahami apa yang dilakukan masing-masing tombol radio dalam grup kami, kami perlu memberikan deskripsi untuk setiap tombol. Cara paling sederhana untuk melakukan ini adalah dengan memberikan deskripsi sebagai teks segera setelah tombol.

Namun, ada beberapa masalah dengan hanya menggunakan teks biasa:

1. Teks mungkin secara visual terkait dengan tombol radio, tetapi mungkin tidak jelas untuk beberapa yang menggunakan pembaca layar, misalnya.
2. Di sebagian besar antarmuka pengguna menggunakan tombol radio, teks yang terkait dengan tombol dapat diklik dan dapat memilih tombol radio yang terkait. Dalam kasus kami di sini, teks tidak akan berfungsi dengan cara ini kecuali teks secara khusus dikaitkan dengan tombol.

Untuk mengaitkan teks dengan tombol radio yang sesuai sehingga mengklik teks akan memilih tombol itu, kita perlu membuat tambahan lebih lanjut ke kode untuk setiap tombol dengan mengelilingi seluruh tombol dan teks yang terkait dalam a label.

Inilah tampilan HTML lengkap untuk salah satu tombol:

 tombol satu

Seperti tombol radio dengan nama id yang dimaksud dalam untuk parameter dari tag label sebenarnya terkandung di dalam tag itu sendiri, the untuk dan Indo parameter redundan di beberapa browser. Namun, peramban mereka sering tidak cukup pintar untuk mengenali sarangnya, sehingga layak untuk menempatkannya untuk memaksimalkan jumlah peramban tempat kode berfungsi.

Itu melengkapi pengkodean tombol radio sendiri. Langkah terakhir adalah mengatur validasi tombol radio menggunakan JavaScript.

Validasi kelompok tombol radio mungkin tidak jelas, tetapi langsung setelah Anda tahu caranya.

Fungsi berikut akan memvalidasi bahwa salah satu tombol radio dalam suatu grup telah dipilih:

// Validasi Tombol Radio
// hak cipta Stephen Chapman, 15 November 2004, 14 September 2005
// Anda dapat menyalin fungsi ini tetapi harap tetap perhatikan hak cipta itu
function valButton (btn) {
var cnt = -1;
untuk (var i = btn.length-1; i> -1; i--) {
if (btn [i] .checked) {cnt = i; i = -1;}
}
jika (cnt> -1) kembalikan btn [cnt] .value;
lain kembali nol;
}

Untuk menggunakan fungsi di atas, panggil dari dalam rutinitas validasi formulir Anda dan berikan nama grup tombol radio. Ini akan mengembalikan nilai tombol dalam grup yang dipilih, atau mengembalikan nilai nol jika tidak ada tombol dalam grup yang dipilih.

Misalnya, berikut adalah kode yang akan melakukan validasi tombol radio:

var btn = valButton (form.group1);
if (btn == null) waspada ('Tidak ada tombol radio yang dipilih');
lansiran lain ('Nilai tombol' + btn + 'dipilih');

Kode ini dimasukkan ke dalam fungsi yang disebut oleh onClick acara terlampir pada tombol validasi (atau kirim) pada formulir.

Referensi ke seluruh formulir dikirimkan sebagai parameter ke fungsi, yang menggunakan argumen "formulir" untuk merujuk ke formulir lengkap. Untuk memvalidasi grup tombol radio dengan nama group1, kami, meneruskan form.group1 ke fungsi valButton.

Semua grup tombol radio yang Anda perlukan dapat ditangani menggunakan langkah-langkah yang dijelaskan di atas.