Question

我有一个文本框元素。我正在为该字段做验证，需要动态地向该字段添加错误消息。

<div class="abc xyz">
    <input  class="class1" type="text" id="test1" name="test1" value="test" title="Invalid input"/>
    <div class="aux-content"><p>Aux content1</p></div>  
    <div class="aux-content"><p>Aux content2.</p></div>                     
</div>

JS功能

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

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

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

在验证中（0函数我需要检查值是否为空。如果需要，我需要在Aux Content2 div下面显示错误信息。目前它在文本框后面显示错误。但是我想要在aux内容2之后我怎么能这样做？

感谢

Answer 1

尝试这样的事情

            if(input.val() == 0)
            {    
                input.addClass('wrong');
                var parent = input.parent();
                var error_div = parent.find('.aux-content').eq(2);
                var title = input.attr('title');
                error_div.html('<ul class="error"><li>'+title+'</li></ul>');
                return false;
            }

Answer 2

您好我认为这会有所帮助;

  if(input.val() == 0)
    {    
        input.addClass('wrong');
        var title = input.attr('title');
        var _error_ul = $('<ul class="error"><li>'+title+'</li></ul>')
                        .insertAfter(input.nextAll(".aux-content:last"));
    }

在元素的两个div之后动态添加div

2 个答案: