13

ラジオ ボタンの入力を検証する必要があります。つまり、送信ボタンが押され、ラジオ ボタンが選択されていない場合、ユーザーに「チェック ボックスを選択してください」という警告が表示されます。ラジオ ボタンが選択されている場合は、単にフォームを送信する必要があります。警告なし。

これには HTML CSS と JavaScript しか使用できません。jquery の方が 1000 倍簡単なのはわかっていますが、残念ながらそれは使用できません。

HTML が有効でないことはわかっていますが、現在の問題に直接影響しない限り、後で処理します。

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/>
            <label for="s1">Yes</label>
            <input type="radio" id="1" name="yesno" value="1"/>
            <br/>
            <label for="s2">No</label>
            <input type="radio" id="1" name="yesno" value="2"/>

            <br/>       

    <input type="submit" value="Submit"><br/>
    </form>

ご指摘ありがとうございます。

4

6 に答える 6

22

1 つ目: コードが正しくないことがわかっている場合は、何かを行う前に修正​​する必要があります。

次のようなことができます。

function validateForm() {
    var radios = document.getElementsByName("yesno");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    if (!formValid) alert("Must check some option!");
    return formValid;
}​

実際に見てみましょう: http://jsfiddle.net/FhgQS/

于 2012-04-26T18:25:38.710 に答える
2 
<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">

    <div class="text-input">
        <label>Gender: </label>
        <input class="form-control" type="radio" name="gender" id="male" value="male" />
        <label for="male">Male</label>
        <input class="form-control" type="radio" name="gender" id="female" value="female" />
        <label for="female">Female</label>
    </div>
    <div class="text-input" align="center">
        <input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
    </div>

</form>

<script type="text/javascript">
    function radioValidation(){

        var gender = document.getElementsByName('gender');
        var genValue = false;

        for(var i=0; i<gender.length;i++){
            if(gender[i].checked == true){
                genValue = true;    
            }
        }
        if(!genValue){
            alert("Please Choose the gender");
            return false;
        }

    }
</script>

ソース: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

于 2016-11-14T11:44:40.730 に答える
0 
document.forms[ 'forms1' ].onsubmit = function() {
    return [].some.call( this.elements, function( el ) {
        return el.type === 'radio' ? el.checked : false
    } )
}

私の頭から何か。コードが機能しているかどうかわからない。

于 2012-04-26T18:21:37.040 に答える
0

上記の Javascript ソリューションに加えて、マークアップで必要に応じてラジオ ボタンをマークすることにより、HTML 5 ソリューションを使用することもできます。これにより、Javascript が不要になり、ブラウザーが作業を行います。

これをうまく行う方法の詳細については、HTML5: How to use the "required" attribute with a "radio" input fieldを参照してください。

于 2016-06-29T16:16:34.907 に答える