Menggunakan atribut "wajib" HTML5 untuk sekelompok kotak centang?


172

Saat menggunakan browser yang lebih baru yang mendukung HTML5 (FireFox 4 misalnya);
dan bidang formulir memiliki atribut required='required';
dan bidang formulir kosong / kosong;
dan tombol kirim diklik;
browser mendeteksi bahwa bidang "wajib" kosong dan tidak mengirimkan formulir;
alih-alih peramban menampilkan petunjuk yang meminta pengguna mengetik teks ke dalam bidang.

Sekarang, alih-alih bidang teks tunggal, saya memiliki sekelompok kotak centang , di mana setidaknya satu harus diperiksa / dipilih oleh pengguna.

Bagaimana saya bisa menggunakan requiredatribut HTML5 pada grup kotak centang ini? (Karena hanya satu dari kotak centang yang perlu diperiksa, saya tidak dapat menempatkan requiredatribut pada setiap kotak centang)

ps. Saya menggunakan simple_form , jika itu penting.


MEMPERBARUI

Apakah atribut HTML 5multiple dapat membantu di sini? Adakah yang pernah menggunakannya sebelum melakukan sesuatu yang mirip dengan pertanyaan saya?

MEMPERBARUI

Ini muncul bahwa fitur ini tidak didukung oleh HTML5 spesifikasi: MASALAH-111: Apa masukan @ diperlukan rata-rata untuk @type = kotak centang.?

(Status masalah: Masalah telah ditandai ditutup tanpa prasangka. ) Dan inilah penjelasannya .

PEMBARUAN 2

Ini adalah pertanyaan lama, tetapi ingin mengklarifikasi bahwa maksud asli dari pertanyaan itu adalah untuk dapat melakukan hal di atas tanpa menggunakan Javascript - yaitu menggunakan cara HTML5 untuk melakukannya. Dalam retrospeksi, saya seharusnya membuat "tanpa Javascript" lebih jelas.


4
Ini adalah pertanyaan yang bagus, dan berlaku untuk input formulir apa pun yang merupakan array (termasuk input teks) di mana Anda ingin memiliki setidaknya satu item dengan nilai atau dicentang (tetapi tidak ada yang spesifik). Demo Saya pikir mungkin tidak ada cara untuk melakukan ini, tapi saya harap ada. (BTW tidak masalah apa bahasa atau kerangka kerja atau pustaka, itu sepenuhnya HTML5)
Wesley Murch

Terima kasih telah menambahkan demo JSFiddle. Mudah-mudahan ada beberapa cara HTML5 untuk melakukan ini, jika tidak, mungkin harus menggulung beberapa solusi menggunakan JQuery dan bidang tersembunyi atau sesuatu.
Zabba

Jika Anda ingin kembali ke javascript (dan Anda menggunakan jQuery), tidak perlu "menggulung" apa pun, gunakan plugin validasi yang sangat mapan: bassistance.de/jquery-plugins/jquery-plugin-validation
Wesley Murch

5
@natedavisolds, saya berpendapat bahwa penggunaannya berguna di beberapa UI - IMO, memilih beberapa kotak centang lebih intuitif bagi pengguna akhir, terutama ketika jumlah kotak centang kecil - daripada klik + pilih seperti halnya dengan kotak pilihan ganda.
Zabba

1
Sebagai catatan tambahan, Anda tidak perlu seluruh yang dibutuhkan = 'wajib'; cukup dengan 'diperlukan' sudah cukup.
William

Jawaban:


85

Sayangnya HTML5 tidak menyediakan cara yang tidak biasa untuk melakukan itu.

Namun, menggunakan jQuery, Anda dapat dengan mudah mengontrol jika grup kotak centang memiliki setidaknya satu elemen yang diperiksa.

Pertimbangkan cuplikan DOM berikut:

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
</div>

Anda dapat menggunakan ungkapan ini:

$('div.checkbox-group.required :checkbox:checked').length > 0

yang kembali truejika setidaknya satu elemen dicentang. Berdasarkan itu, Anda dapat menerapkan pemeriksaan validasi Anda.


@ Clijsters pertanyaannya adalah tentang cara HTML5 untuk melakukannya - tidak dengan Javascript (tentu saja, berbagai solusi dimungkinkan dalam Javascript)
Zabba

6
@ Zabba Tapi jawaban ini mengatakan. bagaimana melakukannya di html5 dengan menulis Sayangnya HTML5 tidak menyediakan cara out-of-the-box untuk melakukan itu
Clijsters

@Clijsters cukup adil
Zabba

18

Ini trik sederhana. Ini adalah kode jQuery yang dapat mengeksploitasi validasi html5 dengan mengubah requiredproperti jika ada yang diperiksa. Berikut ini adalah kode html Anda (pastikan Anda menambahkan yang diperlukan untuk semua elemen dalam grup.)

<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

Berikut ini adalah skrip jQuery, yang menonaktifkan pemeriksaan validasi lebih lanjut jika ada yang dipilih. Pilih menggunakan elemen nama.

$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

Gotcha kecil di sini: Karena Anda menggunakan validasi html5, pastikan Anda menjalankan ini sebelum divalidasi yaitu sebelum mengirimkan formulir.

// but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});

Meskipun dimungkinkan untuk dilakukan melalui Javascript, saya mencari solusi tanpa menggunakan Javascript.
Zabba

3
Saya pikir ini adalah jawaban terbaik sejauh ini. Ya, ia menggunakan javascript, tetapi menggunakan validasi HTML5 alih-alih memiliki peringatan JavaScript yang muncul. Jawaban lain menggunakan JS dan jendela pop up JS.
Cruz Nunez

1
Ini sangat bagus. Pastikan untuk memilih satu atau yang lain pada dua baris jQuery pertama (yang kedua membatalkan yang pertama). Pastikan juga Anda mengubah "opsi" menjadi nama opsi.
Allen Gingrich

Mengingat ini tidak didukung secara asli di HTML5, ini benar-benar harus menjadi jawaban yang diterima! Saya tidak ingin menerapkan pustaka validasi saya sendiri hanya untuk satu set kotak centang pada satu formulir di situs saya.
JamesWilson

11

Saya kira tidak ada cara HTML5 standar untuk melakukan hal ini, tetapi jika Anda tidak keberatan menggunakan perpustakaan jQuery, saya sudah bisa mencapai "kelompok checkbox" validasi menggunakan webshims ' ' kelompok-diperlukan fitur validasi':

The docs untuk kelompok-diperlukan katakanlah:

Jika kotak centang memiliki kelas 'wajib-kelompok' setidaknya satu kotak centang dengan nama yang sama di dalam formulir / dokumen harus diperiksa.

Dan inilah contoh bagaimana Anda akan menggunakannya:

<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />
<input name="checkbox-group" type="checkbox" />

Saya kebanyakan menggunakan webshims untuk polyfill fitur HTML5, tetapi juga memiliki beberapa ekstensi opsional yang hebat seperti ini.

Bahkan memungkinkan Anda untuk menulis aturan validitas khusus Anda sendiri. Misalnya, saya perlu membuat grup kotak centang yang tidak didasarkan pada nama input, jadi saya menulis aturan validitas saya sendiri untuk itu ...


11

HTML5 tidak secara langsung mendukung yang membutuhkan hanya satu / setidaknya satu kotak centang diperiksa dalam grup kotak centang. Ini solusi saya menggunakan Javascript:

HTML

<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two

JAVASCRIPT

       function deRequireCb(elClass) {
            el=document.getElementsByClassName(elClass);

            var atLeastOneChecked=false;//at least one cb is checked
            for (i=0; i<el.length; i++) {
                if (el[i].checked === true) {
                    atLeastOneChecked=true;
                }
            }

            if (atLeastOneChecked === true) {
                for (i=0; i<el.length; i++) {
                    el[i].required = false;
                }
            } else {
                for (i=0; i<el.length; i++) {
                    el[i].required = true;
                }
            }
        }

Javascript akan memastikan setidaknya satu kotak centang dicentang, lalu menghapus semua grup kotak centang. Jika satu kotak centang yang dicentang menjadi tidak dicentang, maka akan memerlukan semua kotak centang lagi!


Solusi yang sangat bagus dan bersih. Wish dapat memberikan lebih dari +1 suara.
Sonal

@Sonal yang Disetujui! Terima kasih atas solusi ini Brian!
NorahKSakal

3

Saya memiliki masalah yang sama dan solusi saya adalah ini:

HTML:

<form id="processForm.php" action="post">
  <div class="input check_boxes required wish_payment_type">
    <div class="wish_payment_type">
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_1">
        <input class="check_boxes required" id="wish_payment_type_1" name="wish[payment_type][]" type="checkbox" value="1">Foo
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_2">
        <input class="check_boxes required" id="wish_payment_type_2" name="wish[payment_type][]" type="checkbox" value="2">Bar
      </label>
    </span>
    <span class="checkbox payment-radio">
      <label for="wish_payment_type_3">
        <input class="check_boxes required" id="wish_payment_type_3" name="wish[payment_type][]" type="checkbox" value="3">Buzz
      </label>

      <input id='submit' type="submit" value="Submit">
  </div>
</form>

JS:

var verifyPaymentType = function () {
  var checkboxes = $('.wish_payment_type .checkbox');
  var inputs = checkboxes.find('input');
  var first = inputs.first()[0];

  inputs.on('change', function () {
    this.setCustomValidity('');
  });

  first.setCustomValidity(checkboxes.find('input:checked').length === 0 ? 'Choose one' : '');
}

$('#submit').click(verifyPaymentType);

https://jsfiddle.net/oywLo5z4/


2

Terinspirasi oleh jawaban dari @thegauraw dan @Brian Woodward, inilah sedikit yang saya tarik bersama untuk pengguna JQuery, termasuk pesan kesalahan validasi khusus:

$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function() {
    if ($cbx_group.is(":checked")) {
        // checkboxes become unrequired as long as one is checked
        $cbx_group.prop("required", false).each(function() {
            this.setCustomValidity("");
        });
    } else {
        // require checkboxes and set custom validation error message
        $cbx_group.prop("required", true).each(function() {
            this.setCustomValidity("Please select at least one checkbox.");
        });
    }
});

Perhatikan bahwa formulir saya memiliki beberapa kotak centang diperiksa secara default.

Mungkin beberapa dari Anda penyihir JavaScript / JQuery bisa memperketat itu lebih banyak?


2

kita dapat melakukan ini dengan mudah dengan HTML5 juga, hanya perlu menambahkan beberapa kode jquery

Demo

HTML

<form>
 <div class="form-group options">
   <input type="checkbox" name="type[]" value="A" required /> A
   <input type="checkbox" name="type[]" value="B" required /> B
   <input type="checkbox" name="type[]" value="C" required /> C
   <input type="submit">
 </div>
</form>

Jquery

$(function(){
    var requiredCheckboxes = $('.options :checkbox[required]');
    requiredCheckboxes.change(function(){
        if(requiredCheckboxes.is(':checked')) {
            requiredCheckboxes.removeAttr('required');
        } else {
            requiredCheckboxes.attr('required', 'required');
        }
    });
});

2

Saya menambahkan radio yang tidak terlihat ke sekelompok kotak centang. Ketika setidaknya satu opsi dicentang, radio juga diatur untuk memeriksa. Ketika semua opsi dibatalkan, radio juga diatur untuk membatalkan. Oleh karena itu, formulir menggunakan prompt radio "Silakan periksa setidaknya satu opsi"

  • Anda tidak dapat menggunakan display: nonekarena radio tidak dapat fokus.
  • Saya membuat ukuran radio sama dengan ukuran kotak centang seluruh, jadi lebih jelas ketika diminta.

HTML

<form>
  <div class="checkboxs-wrapper">
    <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
    <input type="checkbox" name="option[]" value="option1"/>
    <input type="checkbox" name="option[]" value="option2"/>
    <input type="checkbox" name="option[]" value="option3"/>
  </div>
  <input type="submit" value="submit"/>
</form>

Javascript

var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
    var isAtLeastOneServiceSelected = false;
    for(var i = inputs.length-1; i >= 0; --i) {
        if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
    }
    radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
    inputs[i].addEventListener('change', checkCheckboxes)
}

CSS

.checkboxs-wrapper {
  position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    pointer-events: none;
    border: none;
    background: none;
}

https://jsfiddle.net/codus/q6ngpjyc/9/


Ini solusi hebat. Bekerja seperti pesona. Namun, di Firefox, saya mendapatkan garis merah besar di sekitar kotak tombol radio ketika diatur untuk diperlukan pada semua kontrol bentuk menggunakan tombol radio ini. Apakah ada cara untuk membuat outline agar tidak menjadi merah ketika tidak valid (tombol radio tidak dicentang saat diperlukan) kecuali ketika pengguna mengklik kirim dan validasi dilakukan?
gib65

Kita dapat mengatur radio's opacityke 0, dan set opacityke 1 ketika disampaikan, sehingga kita dapat mengontrol apakah muncul garis merah atau tidak.
Codus

Solusi ini jenius !! Dalam kasus saya itu tidak berfungsi jika saya menggunakan salah satu visibility: hiddenatau display: nonehanya untuk menghindari kegunaan sedikit kotor. Karena pembaca layar dan alat aksesibilitas lainnya mungkin akan menemukan tombol radio tersembunyi.
hoorider

1

Hai, cukup gunakan kotak teks tambahan untuk grup kotak centang. Ketika mengklik pada kotak centang apa pun masukkan nilai ke kotak teks itu. Pastikan kotak teks itu diperlukan dan hanya dibaca.


0

Saya menyadari ada banyak solusi di sini, tetapi saya tidak menemukan satu pun dari mereka yang memenuhi setiap persyaratan yang saya miliki:

  • Tidak diperlukan pengkodean khusus
  • Kode berfungsi pada pemuatan halaman
  • Tidak diperlukan kelas khusus (kotak centang atau induknya)
  • Saya memerlukan beberapa daftar kotak centang untuk berbagi hal yang sama nameuntuk mengirimkan masalah Github melalui API mereka, dan menggunakan nama label[]untuk menetapkan label di banyak bidang formulir (dua daftar kotak centang dan beberapa pilihan dan kotak teks) - diberikan saya bisa mencapai ini tanpa mereka berbagi nama yang sama, tetapi saya memutuskan untuk mencobanya, dan itu berhasil.

Satu-satunya persyaratan untuk ini adalah jQuery. Anda dapat menggabungkan ini dengan solusi hebat @ ewall untuk menambahkan pesan kesalahan validasi khusus.

/* required checkboxes */
(function ($) {
	$(function () {
		var $requiredCheckboxes = $("input[type='checkbox'][required]");

		/* init all checkbox lists */
		$requiredCheckboxes.each(function (i, el) {
			//this could easily be changed to suit different parent containers
			var $checkboxList = $(this).closest("div, span, p, ul, td");

			if (!$checkboxList.hasClass("requiredCheckboxList"))
				$checkboxList.addClass("requiredCheckboxList");
		});

		var $requiredCheckboxLists = $(".requiredCheckboxList");

		$requiredCheckboxLists.each(function (i, el) {
			var $checkboxList = $(this);
			$checkboxList.on("change", "input[type='checkbox']", function (e) {
				updateCheckboxesRequired($(this).parents(".requiredCheckboxList"));
			});

			updateCheckboxesRequired($checkboxList);
		});

		function updateCheckboxesRequired($checkboxList) {
			var $chk = $checkboxList.find("input[type='checkbox']").eq(0),
				cblName = $chk.attr("name"),
				cblNameAttr = "[name='" + cblName + "']",
				$checkboxes = $checkboxList.find("input[type='checkbox']" + cblNameAttr);

			if ($checkboxList.find(cblNameAttr + ":checked").length > 0) {
				$checkboxes.prop("required", false);
			} else {
				$checkboxes.prop("required", true);
			}
		}

	});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="post" action="post.php">
<div>
	Type of report:
</div>
<div>
	<input type="checkbox" id="chkTypeOfReportError" name="label[]" value="Error" required>
	<label for="chkTypeOfReportError">Error</label>

	<input type="checkbox" id="chkTypeOfReportQuestion" name="label[]" value="Question" required>
	<label for="chkTypeOfReportQuestion">Question</label>

	<input type="checkbox" id="chkTypeOfReportFeatureRequest" name="label[]" value="Feature Request" required>
	<label for="chkTypeOfReportFeatureRequest">Feature Request</label>
</div>

<div>
	Priority
</div>
<div>
	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: High" required>
	<label for="chkPriorityHigh">High</label>


	<input type="checkbox" id="chkTypeOfContributionBlog" name="label[]" value="Priority: Medium" required>
	<label for="chkPriorityMedium">Medium</label>


	<input type="checkbox" id="chkTypeOfContributionLow" name="label[]" value="Priority: Low" required>
	<label for="chkPriorityMedium">Low</label>
</div>
<div>
	<input type="submit" />
</div>
</form>


-1

Berikut ini adalah trik sederhana menggunakan Jquery !!

HTML

<form id="hobbieform">
        <div>
            <input type="checkbox" name="hobbies[]">Coding
            <input type="checkbox" name="hobbies[]">Gaming
            <input type="checkbox" name="hobbies[]">Driving
        </div>
</form>


JQuery

$('#hobbieform').on("submit", function (e) {
    var arr = $(this).serialize().toString();
    if(arr.indexOf("hobbies") < 0){
        e.preventDefault();
        alert("You must select at least one hobbie");
    }
});

Itu saja .. ini berfungsi karena jika tidak ada kotak centang yang dipilih, tidak ada yang berkaitan dengan grup kotak centang (termasuk namanya) yang diposting ke server


-1

Mencoba:

self.request.get('sports_played', allow_multiple=True)

atau

self.request.POST.getall('sports_played')

Lebih spesifik:

Saat Anda membaca data dari larik kotak centang, pastikan larik memiliki:

len>0 

Pada kasus ini:

len(self.request.get('array', allow_multiple=True)) > 0

Bisakah Anda menguraikan jawaban Anda sedikit lebih banyak?
Dua puluh

ketika Anda membaca data dari array kotak centang, pastikan array memiliki len> 0 dalam kasus ini: len (self.request.get ('array', allow_multiple = True))> 0
Gjison Giocf

Harap edit pertanyaan Anda dengan informasi dalam komentar Anda di atas dan dengan senang hati saya akan menghapus downvote.
Dua puluh

Terima kasih telah mengedit posting Anda, tetapi sedikit lebih banyak kesopanan akan sesuai.
Dua puluh

tampaknya sama sekali tidak terkait dengan pertanyaan itu. Bertanya tentang validasi html, dan solusinya di sini adalah python. Pertanyaannya bahkan tidak bertanya tentang validasi sisi server, menanyakan apakah ada cara untuk memvalidasi grup kotak centang untuk memeriksa apakah setidaknya 1 dicentang.
Octavioamu
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.