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

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

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

---

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

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

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

---

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>

---

라디오 버튼 코드-

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

---

나는 같은 문제가 있었다. 유효성 검사기를 위해 사용자 지정 강조 표시 및 강조 표시 해제 기능을 작성하는 것만으로 마무리하십시오. 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);
            }
        },

---

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

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

참고 URL : https://stackoverflow.com/questions/277589/validation-of-radio-button-group-using-jquery-validation-plugin