JQuery doğrulama eklentisi kullanılarak radyo düğmesi grubunun doğrulanması

128

JQuery doğrulama eklentisi kullanılarak bir radyo düğmesi grubu (bir radyo düğmesi seçilmelidir) için doğrulama nasıl gerçekleştirilir?

jquery validation

— user27052
kaynak

C.reeves'in cevabına forum.jquery.com/topic/… 'de bakın

Dışarıda çok güçlü ve kullanımı kolay yeni bir jQuery doğrulayıcı var. Kontrol edebilirsiniz: code.google.com/p/bvalidator

— Nenad

bu kadar basit bir şey için bütün bir kütüphaneyi dahil etmek istemiyorum

— Doug Molineux

113

Daha yeni jquery sürümleriyle (sanırım 1.3+), yapmanız gereken tek şey radyo setinin üyelerinden birini gerekli olacak şekilde ayarlamak ve gerisini jquery halledecektir:

<input type="radio" name="myoptions" value="blue" class="required"> Blue<br />
<input type="radio" name="myoptions" value="red"> Red<br />
<input type="radio" name="myoptions" value="green"> Green

Yukarıdakiler, devam etmeden önce "seçeneklerim" adıyla birlikte 3 radyo seçeneğinden en az 1'inin seçilmesini gerektirecektir.

Mahes'in etiket önerisi, btw, harika çalışıyor!

— Brandon Roma
kaynak

Bu, jQuery'deki güncellemelerle benim için artık en iyi cevap. +1.

— Kieran Andrews

6

Bununla ilgili tek sorun, hiçbiri işaretlenmediğinde, jQuery validate ilk radyo düğmesini kırmızıyla vurgular, ancak gerçekte muhtemelen TÜMÜNÜ vurgulamak istersiniz. Ayrıca, herhangi bir radyo düğmesini kontrol ettiğinizde, kırmızı kaybolmalıdır.

— Haacked

2

@Haacked Hata mesajını anlamlı bir yere yerleştirmek için doğrulama seçeneklerinde errorPlacement geri arama fonksiyonunu kullanabilirsiniz.

— autonomatt

2

@Haacked: ekleme focusInvalid: falseiçin validate()seçenekler ilk radyo düğmesinin vurgulayarak önleyecektir.

— Jim Miller

2

Ben her zaman bu şekilde yaparım ve hata etiketini errorPlacement fonksiyonunda konumlandırırım. Radyo düğmeleri için yaptığım şey şu: if (element.is ("input: radio")) {error.insertAfter (element.parent ()); } else {error.insertAfter (element); }

— Francisco Goldenstein

24

radyo düğmesi grubu seçimini doğrulamak için aşağıdaki kuralı kullanın

myRadioGroupName : {required :true}

myRadioGroupName, name özniteliğine verdiğiniz değerdir

— Mahes
kaynak

15

Etiketin konumunu kontrol etmek istiyorsanız, istediğiniz metinle birlikte kendi hata etiketinizi sağlayabileceğinizi unutmayın: <label for = "myRadioGroupName" class = "error" style = "display: none; "> Lütfen birini seçin. </label>

— Tom

@Tom label, hatanın etiketini kendinize yazmak faydasızdır , aslında eklenti bu hata etiketi etiketini otomatik olarak ekler.

— ahmehri

3

Uzun zaman önceydi, ama yapmaya çalıştığım şeyin <label> öğesini eklenti tarafından otomatik olarak oluşturulduğu yere değil, DOM'da başka bir yere yerleştirmek olduğunu hayal ediyorum. Ayrıca, eklenti davranışının son 5 yılda değişmiş olması oldukça olası ...

— Tom

Özel hatalar için burada "tip" yerine "ad" gerektirmesi üzücü.

— justdan23

19

Bunu da kullanabilirsiniz:

<fieldset>
<input type="radio" name="myoptions[]" value="blue"> Blue<br />
<input type="radio" name="myoptions[]" value="red"> Red<br />
<input type="radio" name="myoptions[]" value="green"> Green<br />
<label for="myoptions[]" class="error" style="display:none;">Please choose one.</label>
</fieldset>

ve basitçe bu kuralı ekleyin

rules: {
 'myoptions[]':{ required:true }
}

Kuralların nasıl ekleneceğinden bahsedin.

— Haider Abbas
kaynak

1

Ancak bu, HTML5 doğrulamasında hatalara yol açar, çünkü for özniteliğinin bir kimlik referansı olması gerektiğine inanıyorum (3 radyo düğmesini aynı kimliğe ayarlayamayız).

— armyofda12mnkeys

1

Name özniteliği ve id özniteliği arasında BÜYÜK bir fark vardır.

— Norman H

2

Lütfen bir radyo düğmesinin yalnızca bir değer döndürmesi gerektiğine dikkat edin, bu nedenle name="myoptions[]"birden fazla değerin döndürülebileceğini ima ettiğinden biraz kafa karıştırıcıdır.

— Demans

Hata mesajını en üste koyar. <style> .radio-group {konumu: göreli; kenar üstü: 40 piksel; } # miyopsiyon hatası {konum: mutlak; üst: -25px; } </style> <div class = "radio-group"> <input type = "radio" name = "myoptions" value = "blue" class = "required"> Mavi <br /> <input type = "radio" name = "myoptions" value = "red"> Kırmızı <br /> <input type = "radio" name = "myoptions" value = "green"> Yeşil </div> </div> <! - end radio- grup ->

— Sonobor

4

Brandon'ın cevabına göre. Ancak, göze çarpmayan doğrulama kullanan ASP.NET MVC kullanıyorsanız, data-val özniteliğini ilkine ekleyebilirsiniz. Ayrıca kullanılabilirlik için her radyo düğmesi için etiketlerim olmasını seviyorum.

<span class="field-validation-valid" data-valmsg-for="color" data-valmsg-replace="true"></span>
<p><input type="radio" name="color" id="red" value="R" data-val="true" data-val-required="Please choose one of these options:"/> <label for="red">Red</label></p>
<p><input type="radio" name="color" id="green" value="G"/> <label for="green">Green</label></p>
<p><input type="radio" name="color" id="blue" value="B"/> <label for="blue">Blue</label></p>

— Matt Frear
kaynak

3

Doğrulamanın başka bir yolu da şudur.

var $radio = $('input:radio[name="nameRadioButton"]');
$radio.addClass("validate[required]");

Umarım örneğim sana yardımcı olur

— strudeltercero
kaynak

2

Ben de aynı sorunu yaşadım. Doğrulayıcı için özel bir vurgulama ve vurgulama kaldırma işlevi yazarak sarın. Bunu doğrulama seçeneklerine eklemek, hata sınıfını öğeye ve ilgili etikete eklemelidir:

        'highlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").addClass(errorClass);
                    $(this).addClass(errorClass);
                });
            } else {
                $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
                $(element).addClass(errorClass);
            }
        },
        'unhighlight': function (element, errorClass, validClass) {
            if($(element).attr('type') == 'radio'){
                $(element.form).find("input[type=radio]").each(function(which){
                    $(element.form).find("label[for=" + this.id + "]").removeClass(errorClass);
                    $(this).removeClass(errorClass);
                });
            }else {
                $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
                $(element).removeClass(errorClass);
            }
        },

— Cin
kaynak

2

radyo düğmesi kodu -

<div>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Female",false) Female</span>
<span class="radio inline" style="margin-right: 10px;">@Html.RadioButton("Gender", "Male",false) Male</span>                                                        
<div class='GenderValidation' style="color:#ee8929;"></div>    
</div> 

<input class="btn btn-primary" type="submit" value="Create" id="create"/>

ve jQuery kodu-

<script>
    $(document).ready(function () {
        $('#create').click(function(){

            var gender=$('#Gender').val();
            if ($("#Gender:checked").length == 0){
                $('.GenderValidation').text("Gender is required.");
                return false;
            }
        });
    });
</script>

— Sayli Vaidya
kaynak

0

Hata mesajını en üste koyar.

   <style> 

 .radio-group{ 
      position:relative; margin-top:40px; 
 } 

 #myoptions-error{ 
     position:absolute; 
     top: -25px; 
  } 

 </style> 

 <div class="radio-group"> 
 <input type="radio" name="myoptions" value="blue" class="required"> Blue<br /> 
 <input type="radio" name="myoptions" value="red"> Red<br /> 
 <input type="radio" name="myoptions" value="green"> Green </div>
 </div><!-- end radio-group -->

— Sonobor
kaynak