在div中的所有输入元素之后动态添加ul

时间:2013-11-19 08:23:18

标签: jquery css

我需要在使用jquery的div的所有输入元素之后添加ul。 这通常是验证电话号码。因此,如果上述任何电话文本框验证失败,则所有电话文本框都需要以红色突出显示,然后我需要在所有输入后显示错误消息。我使用jquery动态添加的错误消息。

<div class="class1">
   <input class="class2" type="text" id="id1" name="id1" maxlength="3" title="Please enter value"/>
   <span class="class3">-</span>
   <input class="class2" type="text" id="id2" name="id2" title="Please enter value"/>
   <span class="class3">-</span>
   <input class="class2 " type="text" id="id3" name="id3" title="Please enter value"/>
   <span class="class3">Ext.</span>
   <input class="class2" type="text" id="id4" name="id4" />
   <input type="hidden" id="hidden_id" />
  <!--Need to add ul element here-->
</div>

JS功能

$(function() {

function validate(){
var returnVal = true;
var input = $('#id1');
input.nextAll("ul.error").remove();
input.removeClass('wrong');
input.removeClass('correct');
if(input.val() == 0)
{    
    input.addClass('wrong');
    var title = input.attr('title');
    $('<ul class="error"><li>'+title+'</li></ul>').insertAfter(input.nextAll("input"));
    return false;
}
else{
    input.addClass('correct');
    returnVal = true;
}
return returnVal;
}

('#subBtn').click(function(){
   var retVal = validate();
   });

$('#id1').blur(validate);

});

如果我使用以下代码插入错误,则会在所有输入文本框后显示错误。

$('<ul class="error"><li>'+title+'</li></ul>').insertAfter(input.nextAll("input"));

我只需显示一条错误消息,需要在最后一次输入后显示,如果输入正确,我需要删除“错误”类并添加“正确”类 我怎样才能做到这一点? 有人可以帮帮我吗?

由于

3 个答案:

答案 0 :(得分:0)

不使用UL而是使用两个具有不同错误和正确类别的div。因此,根据您的逻辑,您可以使用以下内容:

if error ($("#divError").html("Some error msg");)
else $("#divCorrect").html("Some success msg");

其中divError和divCorrect是这样的div:

<div id='divError' class='error'></div>
<div id='divCorrect' class='correct'></div>

希望这有帮助。

答案 1 :(得分:0)

要查找最后一个兄弟输入,请尝试:

//for id1, input.siblings('input').last() will be the hidden_id

$('<ul class="error"><li>'+title+'</li></ul>').insertAfter(input.siblings('input').last())

答案 2 :(得分:0)

试试这个

$('<ul class="error"><li>'+title+'</li></ul>').insertAfter(input.last());

我认为这会在最后一个输入元素之后插入ul