单选按钮单击删除错误消息jquery

时间:2013-11-13 10:13:37

标签: javascript jquery error-handling radio-button

表格中有多个单选按钮。我正在验证提交表格的人。因此,如果未选择单选按钮,则会显示该单选按钮的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/

2 个答案:

答案 0 :(得分: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();

Updated fiddle here.

答案 1 :(得分:0)

你可以这样做:

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

Fiddle Demo