0

コードで使用する 4 つのラジオ グループがあります。その中で、そのうちの 2 つは必須のラジオ グループです。フォームの送信時に、必要なラジオ グループがチェックされているかどうかを確認する必要があります。チェックされていない場合は、その次の div にエラー メッセージを追加する必要があります。しかし、それは私にとってはうまくいきません。誰かが私を助けることができますか？以下は、1 つのラジオ グループです。そのため、ラジオボタンを繰り返し使用して、チェックされていないかどうかを確認し、エラーメッセージを追加しようとしています。しかし、それは機能していないようです。両方のラジオ ボタンに「1 つ選択してください」というテキストが表示されます。2 番目のラジオ ボタンの下に 1 か所だけ必要です。

$("input:radio").each(function(){
 $(this).next('div.error').remove();
var name = $(this).attr("name");
if($("input:radio[name="+name+"]:checked").length == 0){
    $(this).after('<div class="error">Please select one</div>');
    returnValue = false;
}
else{
    $(this).next('div.error').remove();
    returnValue = true;
}

});

HTML

 <input name="radio1" id="one" value="first" type="radio" class = "check"/>
 <input name="radio1" id="two" value="second" type="radio" class="check"/>
4

2 に答える 2

0

次の実装を試すこともできます。この実装では、データ検証属性を追加できるグループ div を使用します。JavaScript は、この data-validation 属性を使用して、検証する必要があるグループを認識します。他のページ/ウェブサイト/アプリケーションで再利用するのは非常に簡単なので、これはより良い実装だと思います.

HTML:

<div class="group" data-validation="required">
<label><input name="radio1" value="first" type="radio" class = "check"/> First</label><br />
<label><input name="radio1" value="second" type="radio" class = "check"/>Second</label></div>

JavaScript:

jQuery(document).ready(function($) {

// Bind validate function
$('button').on('click', validate);


function validate() {
    $('.error').remove();
    $.each($('.group[data-validation=required]'), function (idx, group) {
        var current = $(group).find('[type=radio]:checked').val()
        if( current === undefined ) {
            $(group).after('<div class="error">Please select one</div>');
        }
    });
}});

デモフィドル

于 2013-10-15T11:43:00.467 に答える