Bir grup onay kutusu için HTML5 "zorunlu" özelliğini mi kullanıyorsunuz?

HTML5'i destekleyen yeni tarayıcıları kullanırken (örneğin FireFox 4);
ve bir form alanı bu özelliğe sahiptir required='required';
ve form alanı boş / boş;
ve gönder düğmesi tıklanır;
tarayıcılar "zorunlu" alanın boş olduğunu algılar ve formu göndermez;
bunun yerine tarayıcı kullanıcıdan alana metin yazmasını isteyen bir ipucu gösterir.

Şimdi, tek bir metin alanı yerine, en az bir kullanıcı tarafından kontrol edilmesi / seçilmesi gereken bir grup onay kutusu var .

requiredBu onay kutusu grubunda HTML5 özelliğini nasıl kullanabilirim ? (Onay kutularından yalnızca birinin işaretlenmesi gerektiğinden, requiredözelliği her onay kutusuna yerleştiremiyorum)

ps. Önemli olursa, simple_form kullanıyorum .

GÜNCELLEME

Could HTML 5 multiplenitelik burada yararlı olabilir? Bunu daha önce soruma benzer bir şey yapmak için kullanan var mı?

GÜNCELLEME

O görüntülenir : Bu özellik HTML5 spec tarafından desteklenmediğini SAYI-111:. @ Giriş yapar @type = checkbox için ortalama gerekli ne olacak?

(Sorun durumu: Sorun önyargısız olarak kapalı olarak işaretlendi. ) Ve işte açıklama .

GÜNCELLEME 2

Bu eski bir soru, ama sorunun asıl amacının yukarıdakileri Javascript kullanmadan, yani HTML5 yolunu kullanarak yapabilmek olduğunu açıklığa kavuşturmak istedik. Geriye baktığımda, "Javascript olmadan" daha elverişli olmalıydım.

Ne yazık ki HTML5 bunu yapmak için kullanıma hazır bir yol sağlamaz.

Bununla birlikte, jQuery kullanarak, bir onay kutusu grubunun en az bir işaretli öğeye sahip olup olmadığını kolayca kontrol edebilirsiniz.

Aşağıdaki DOM snippet'ini düşünün:

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

Bu ifadeyi kullanabilirsiniz:

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

trueen az bir eleman işaretlenirse geri döner . Buna dayanarak, doğrulama kontrolünüzü gerçekleştirebilirsiniz.

Basit bir numara. Bu, requiredherhangi biri işaretlenirse özellikleri değiştirerek html5 doğrulamasından yararlanabilen jQuery kodudur . Html kodunuz aşağıdadır (gruptaki tüm öğeler için gerekenleri eklediğinizden emin olun.)

<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

Aşağıda, herhangi biri seçiliyse başka doğrulama denetimini devre dışı bırakan jQuery betiği yer almaktadır. Ad öğesini kullanarak seçin.

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

Küçük gotcha burada: html5 doğrulaması kullandığınızdan, onaylanmadan önce, yani form gönderilmeden önce yürüttüğünüzden emin olun.

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

Bunu yapmak için standart bir HTML5 yolu yoktur, ancak bir jQuery kitaplığı kullanmak sakıncası yoksa, webshims '" grup gerekli " doğrulama özelliğini kullanarak bir "onay kutusu grubu" doğrulama elde edebildim :

Grup için gerekli belgeler şunları söylüyor:

Bir onay kutusunda 'grup gerekli' sınıfı varsa, form / belge içinde aynı ada sahip onay kutularından en az birinin işaretlenmesi gerekir.

İşte nasıl kullanacağınıza dair bir örnek:

<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" />

Çoğunlukla HTML5 özelliklerini çoklu doldurmak için webshims kullanıyorum, ancak bunun gibi bazı büyük isteğe bağlı uzantılar da var.

Hatta kendi özel geçerlilik kurallarınızı yazmanıza izin verir. Örneğin, girdinin adına dayanmayan bir onay kutusu grubu oluşturmam gerekiyordu, bu yüzden bunun için kendi geçerlilik kuralımı yazdım ...

HTML5, bir onay kutusu grubunda yalnızca bir / en az bir onay kutusunun işaretlenmesini gerektirmez. Javascript kullanarak benim çözüm İşte:

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, en az bir onay kutusunun işaretli olmasını sağlar, ardından tüm onay kutusu grubunun işaretini kaldırır. İşaretli olan onay kutusunun işareti kaldırılırsa, yine tüm onay kutularını gerektirir!

Aynı sorunu yaşadım ve benim çözümüm şuydu:

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/

@Thegauraw ve @Brian Woodward'ın cevaplarından esinlenerek, JQuery kullanıcıları için özel bir doğrulama hata mesajı da dahil olmak üzere bir araya getirdim:

$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.");
        });
    }
});

Formumda varsayılan olarak işaretlenmiş bazı onay kutularının bulunduğunu unutmayın.

Belki bazılarınız JavaScript / JQuery sihirbazları bunu daha da sıkılaştırabilir?

Bunu html5 ile kolayca yapabiliriz, sadece bazı jquery kodu eklemeniz gerekir

gösteri

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

Bir grup onay kutusuna görünmez bir radyo ekledim. En az bir seçenek işaretlendiğinde, radyo da kontrol edecek şekilde ayarlanır. Tüm seçenekler iptal edildiğinde, radyo da iptal edilecek şekilde ayarlanmıştır. Bu nedenle, form "Lütfen en az bir seçeneği işaretleyin" radyo istemini kullanır.

• Kullanamazsınız display: noneçünkü radyo odaklanamaz.
• Radyo boyutunu tüm onay kutularının boyutuna eşit yapıyorum, bu yüzden istendiğinde daha açık.

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/

Merhaba sadece onay kutusu grubuna ek bir metin kutusu kullanın.Herhangi bir onay kutusunu tıkladığınızda değerleri o metin kutusuna koyun.Bu metin kutusunu gerekli ve salt okunur yapın.

Burada bir ton çözüm olduğunu anlıyorum, ama hiçbirinin sahip olduğum her şeye çarpmadığını gördüm:

• Özel kodlama gerekmez
• Kod sayfa yüklemesinde çalışır
• Özel sınıf gerekmez (onay kutuları veya ebeveynleri)
• nameGithub sorunlarını API'ları aracılığıyla göndermek için aynısını paylaşmak için birkaç onay kutusu listesine ihtiyacım vardı ve label[]birçok form alanına (iki onay kutusu listesi ve birkaç seçim ve metin kutusu) etiketler atamak için adı kullanıyordum - bunu paylaşmadan başarabilirdim aynı adı, ama denemeye karar verdim ve işe yaradı.

Bunun için tek gereksinim jQuery. Özel doğrulama hata mesajları eklemek için bunu @ ewall'un mükemmel çözümü ile birleştirebilirsiniz.

/* 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>

İşte Jquery kullanarak başka bir basit hile !!

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

Hepsi bu .. Bu işe yarar çünkü onay kutusunun hiçbiri seçilmezse, onay kutusu grubuna (adı dahil) ilişkin hiçbir şey sunucuya gönderilmez.

Deneyin:

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

veya

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

Daha spesifik olarak:

Onay kutusu dizisinden veri okurken dizinin şunlara sahip olduğundan emin olun:

len>0 

Bu durumda:

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