Walidacja grupy przycisków opcji przy użyciu wtyczki walidacji jQuery

131

Jak przeprowadzić walidację dla grupy przycisków radiowych (należy wybrać jeden przycisk radiowy) za pomocą wtyczki do walidacji jQuery?

jquery validation

— user27052
źródło

Sprawdź odpowiedź od c.reeves na forum.jquery.com/topic/ ...

Dostępny jest nowy walidator jQuery, który jest bardzo wydajny i łatwy w użyciu. Możesz to sprawdzić: code.google.com/p/bvalidator

— Nenad

nie chcę włączać całej biblioteki do czegoś tak prostego

— Doug Molineux,

113

W nowszych wersjach jquery (myślę, że 1.3+), wszystko co musisz zrobić, to ustawić jednego z członków radia na wymagany, a jquery zajmie się resztą:

<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

Powyższe wymagałoby wybrania co najmniej 1 z 3 opcji radiowych z nazwą „moje opcje” przed kontynuowaniem.

Przy okazji, propozycja etykiety Mahesa działa cudownie!

— Brandon Rome
źródło

To jest teraz najlepsza odpowiedź dla mnie dzięki aktualizacjom jQuery. +1.

— Kieran Andrews,

6

Jedynym problemem jest to, że gdy żaden z nich nie jest zaznaczony, jQuery validate podświetla pierwszy przycisk opcji na czerwono, ale w rzeczywistości prawdopodobnie chcesz podświetlić WSZYSTKIE z nich. Ponadto po zaznaczeniu dowolnego przycisku opcji czerwony powinien zniknąć.

— Haacked

2

@Haacked Możesz użyć funkcji wywołania zwrotnego errorPlacement w opcjach walidacji, aby umieścić komunikat o błędzie w jakimś sensownym miejscu?

— autonomatt

2

@Haacked: dodanie focusInvalid: falsedo validate()opcji zapobiegnie podświetleniu pierwszego przycisku opcji.

— Jim Miller

2

Zawsze robię to w ten sposób i umieszczam etykietę błędu w funkcji errorPlacement. Oto co robię dla przycisków radiowych: if (element.is ("input: radio")) {error.insertAfter (element.parent ()); } else {error.insertAfter (element); }

— Francisco Goldenstein

25

użyj następującej reguły do weryfikacji wyboru grupy przycisków opcji

myRadioGroupName : {required :true}

myRadioGroupName to wartość, którą nadałeś atrybutowi nazwy

— Mahes
źródło

15

Zwróć uwagę, że jeśli chcesz kontrolować położenie etykiety, możesz podać własną etykietę błędu tam, gdzie chcesz, z żądanym tekstem: <label for = "myRadioGroupName" class = "error" style = "display: none; "> Wybierz jedną. </label>

— Tom

@Tom nie ma sensu pisać samodzielnie labeltagu błędu, w rzeczywistości wtyczka automatycznie dodaje ten tag z etykietą błędu.

— ahmehri

3

Raczej dawno temu, ale wyobrażam sobie, co próbowałem zrobić, to umieścić <label> w innym miejscu w DOM, a nie tam, gdzie został on automatycznie utworzony przez wtyczkę. Jest również całkiem możliwe, że zachowanie wtyczki zmieniło się w ciągu ostatnich 5 lat ...

— Tomek

Smutne, jak wymaga tutaj „nazwy” zamiast „typu” dla niestandardowych błędów.

— justdan23

19

Możesz również użyć tego:

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

i po prostu dodaj tę regułę

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

Wspomnij, jak dodać reguły.

— Haider Abbas
źródło

1

Ale to spowodowałoby błędy w walidacji HTML5, ponieważ uważam, że atrybut for musi być odniesieniem do identyfikatora (którego nie możemy ustawić 3 przycisków radiowych na ten sam identyfikator).

— armyofda12mnkeys

1

Istnieje DUŻA różnica między atrybutem nazwy a atrybutem id.

— Norman H

2

Proszę nie zwracać uwagi na to, że przycisk opcji powinien zwracać tylko jedną wartość, w związku z czym name="myoptions[]"jest to nieco zagmatwane, ponieważ wskazuje, że można zwrócić wiele wartości.

— Rafael Herscovici

Umieszcza komunikat o błędzie u góry. <styl> .radio-group {pozycja: względna; margin-top: 40px; } # myoptions-error {pozycja: bezwzględna; góra: -25px; } </style> <div class = "radio-group"> <input type = "radio" name = "myoptions" value = "blue" class = "required"> Niebieski <br /> <input type = "radio" name = "myoptions" value = "red"> Czerwony <br /> <input type = "radio" name = "myoptions" value = "green"> Green </div> </div> <! - end radio- grupa ->

— Sonobor

4

Zgodnie z odpowiedzią Brandona. Ale jeśli używasz ASP.NET MVC, który używa dyskretnej weryfikacji, możesz dodać atrybut data-val do pierwszego. Lubię też mieć etykiety dla każdego przycisku opcji w celu ułatwienia korzystania.

<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
źródło

3

Inny sposób weryfikacji jest taki.

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

Mam nadzieję, że mój przykład ci pomoże

— strudeltercero
źródło

2

Miałem ten sam problem. Wystarczy napisać niestandardową funkcję podświetlania i usuwania podświetlenia dla walidatora. Dodanie tego do opcji walidacji powinno dodać klasę błędu do elementu i jego odpowiedniej etykiety:

        '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
źródło

2

kod przycisku opcji -

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

i kod jQuery-

<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
źródło

0

Umieszcza komunikat o błędzie u góry.

   <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
źródło