0

フォームに複数のラジオ ボタンがあります。フォームの送信時にそれらを検証しています。そのため、ラジオ ボタンが選択されていない場合、そのラジオ ボタンの title 属性で指定されたエラーが表示されます。タイトルは、ラジオ ボタンごとに異なります。この表示エラーは現在正常に機能しています。ユーザーがラジオボタンをチェックしたときに、そのエラーメッセージを削除する必要があります。しかし、これは機能していません

HTML

 <div class="input-container" data-validation="required">

<input type="radio" name="radio1" id="first" value="First" class="required "title="Please select first to continue."/>
<label for="first">First</label>
     <br/>
<input type="radio" name="radio1" id="second" value="Second" class="required "title="Please select first to continue."/>
<label for="second">Second</label>
</div>
<hr/>
<div class="input-container" data-validation="required">

<input type="radio" name="radio2" id="first" value="First" class="required "title="Please select second to continue."/>
<label for="first">First</label>
 <br/>
<input type="radio" name="radio2" id="second" value="Second" class="required "title="Please select second to continue."/>
<label for="second">Second</label>
</div>
<hr/>
<button>Validate</button>

Javascript

$(function() {
$('button').click(function(){
$.each($('.input-container[data-validation=required]'), function (idx,group) {


    var current = $(group).find(':radio');
   if( !current.is(':checked') ) {
        var title = current.attr('title');
       $(group).next('ul.innererrormessages').remove();
        $(group).after('<ul class="innererrormessages"><li>'+title+'</li></ul>');
        }


    });
});
   $('.input-container .required').change(function(){
$(this).next('ul.innererrormessages').remove();
 });

});

フィドル http://jsfiddle.net/jUQYr/26/

4

2 に答える 2

0

これを書きます：

$('button').click(function(){
    $(".innererrormessages").remove(); // add this line to clear messages first
    $.each($('.input-container[data-validation=required]'), function......

から変更する

$(this).next('ul.innererrormessages').remove();

に

 $(this).parents(".input-container").next('ul.innererrormessages').remove();

ここでフィドルを更新しました。

于 2013-11-13T10:18:19.013 に答える
0

あなたはこれを行うことができます：

$('.input-container .required').change(function () {
   $(this).closest('.input-container').next('ul.innererrormessages').remove();
});

フィドルのデモ

于 2013-11-13T10:20:28.570 に答える