jQuery 유효성 검사 플러그인을 사용하여 라디오 버튼 그룹의 유효성 검사

jQuery 유효성 검사 플러그인을 사용하여 라디오 버튼 그룹 (하나의 라디오 버튼을 선택해야 함)에 대한 유효성 검사를 수행하는 방법은 무엇입니까?

jquery의 최신 릴리스 (1.3 이상)는 라디오 세트의 멤버 중 하나를 필수로 설정하면 jquery가 나머지를 처리합니다.

<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

위의 과정을 진행하기 전에 "내 옵션"이라는 이름의 3 가지 라디오 옵션 중 하나 이상을 선택해야합니다.

btw 인 Mahes의 레이블 제안은 훌륭하게 작동합니다!

라디오 버튼 그룹 선택을 확인하려면 다음 규칙을 사용하십시오.

myRadioGroupName : {required :true}

myRadioGroupName은 이름 속성에 부여한 값입니다.

이것을 사용할 수도 있습니다 :

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

이 규칙을 추가하면됩니다

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

규칙을 추가하는 방법을 언급하십시오.

Brandon의 답변에 따라. 그러나 눈에 거슬리지 않는 유효성 검사를 사용하는 ASP.NET MVC를 사용하는 경우 data-val 특성을 첫 번째 특성에 추가 할 수 있습니다. 또한 유용성을 위해 각 라디오 버튼에 레이블을 사용하고 싶습니다.

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

유효성을 검사하는 다른 방법은 다음과 같습니다.

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

내 모범이 당신을 도울 수 있기를 바랍니다

나는 같은 문제가 있었다. 유효성 검사기를 위해 사용자 지정 강조 표시 및 강조 표시 해제 기능을 작성하는 것만으로 마무리하십시오. validaton 옵션에 이것을 추가하면 요소와 해당 레이블에 오류 클래스를 추가해야합니다.

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

라디오 버튼 코드-

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

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>

오류 메시지를 맨 위에 놓습니다.

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