Question

这似乎是一个简单的逻辑事物，但有些我怎么也想不通。我支持这个超过2个小时，似乎没有任何工作...... 我正在进行表单验证。提交表格后，我会检查字段是否为空。如果为空，我向该字段添加一个类，使其变为红色，然后创建一个新的div并显示错误消息。我有几个问题。我在IE8中测试，addClass不起作用。以下是代码段

var first =  true;
if(first == true){
$('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
        $(this).after('<div class="error_text">Required</div>');
        first = false;
        return false;
    }else{
        return true;
    }
});
}
else{
  $('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
                  //I ned to remove the Required text here or else it will get added twice.
        $(this).after('');
                  //Add the text here
                    $(this).after('<div class="error_text">Required</div>');
        return false;
    }else{
        return true;
    }
});
}

因此，当用户第一次点击提交按钮first = true时，它会验证并且哪个字段为空，它将显示该红色边框和文本。这工作正常。现在当用户填写一些字段并再次输入submit时，还有一些未填写的必填字段。所以现在我希望填充的字段删除边框和Required文本，然后显示红色和必需的那些现在是空的。我尝试了很多东西，我对此感到恶心。不知何故，我没有得到正确的逻辑。有人可以帮助我吗？我不想使用验证插件。

Answer 1

如果您要删除的<div>是您正在检查的this之后的下一个元素（$(this).next('div.error_text').remove();引用的那个元素），那么您应该可以执行此操作将其删除：

return true

顺便说一句，如果你想从你的函数中返回一个值，它应该是return false或=，使用等号（first）是不正确的。

var returnValue = true; $('#submit_form .required').filter(':visible').each(function () { var input = $(this); input.next('div.error_text').remove(); input.removeClass('highlight'); if (input.is(':empty')) { input.addClass('highlight'); input.after('<div class="error_text">Required</div>'); returnValue = false; } }); return returnValue;逻辑似乎没必要，因为jQuery善于处理元素不存在的情况。您可以将整个代码简化为：

highlight

然后是.highlight { border: 1px solid #ff0004; }类的以下CSS：

returnValue

请注意，在上面我使用了.each()变量。那是因为你有一个匿名函数被传递给return false，并且调用{{1}}里面只会结束循环的执行，它不会阻止你的表单被提交。

使用jquery删除动态创建的div

1 个答案: