Menggunakan atribut "wajib" HTML5 untuk sekelompok kotak centang?

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.

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.

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
});

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 ...

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!

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/

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?

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');
        }
    });
});

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/

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.

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>

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

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