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

계속하기 전에 "내 옵션"의 이름을 가진 세 가지 라디오 옵션 중 하나 이상을 선택해야 합니다.

마헤스의 레이블 제안, btw는 훌륭하게 작동합니다!

라디오 버튼 그룹 선택의 유효성을 검사하기 위해 다음 규칙을 사용합니다.

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

규칙을 추가하는 방법을 언급합니다.

브랜든의 대답에 따르면.하지만 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 코드-

$(document).ready(function () {
    $('#create').click(function(){
        var gender=$('#Gender').val();

        if ($("#Gender:checked").length == 0) {
            $('.GenderValidation').text("Gender is required.");
            return false;
        }
    });
});

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

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

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

<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><!-- end radio-group -->

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