Question

我需要在使用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"));

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

由于

Answer 1

不使用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>

希望这有帮助。

Answer 2

要查找最后一个兄弟输入，请尝试：

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

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

Answer 3

试试这个

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

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

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

3 个答案: