在输入文本后添加新的 div 元素并添加 css

Question

我有一个带有输入类型文本和单选按钮的 html 表单，其中 class= 必需。我正在尝试验证表格。在提交表单时，我需要验证表单，如果它返回 false，我需要添加一个新的 div（文本“请填写必填字段”）并将其显示为红色字段下方。如果用户填写该字段，它应该变成绿色或红色应该消失。 jQuery 在单独的 js 文件中。因此，单击提交按钮后，我正在执行以下操作

$('#test_form .required').filter(':visible').each(function() {
var input = $(this);
if($(this).is(':empty')){
    $(this).css("border","2px solid #FF0004");
    $(this).after('<div>Please fill in the required field</div>');
    return = false;
}else{
    return true;
}
});

现在出现了几个问题。 1.必填文本在字段下方。我需要红色和字体大小 - 10px。那么如何将css添加到新添加的div中呢？ 2.考虑有一个单选组5个单选按钮。因此，仅当未选择至少一个并显示该单选组下方的文本时，我才需要必需的文本。现在，所有单选按钮都出现了必需的文本。 3. 此外，如果用户单击提交 4 次，则每个字段的文本将添加 4 次。我认为我们可以使用标志来处理这个问题

有人可以指导我吗？

Answer 1

1. 必填文本在字段下方。我需要红色和字体大小 - 10 像素。那么如何在新添加的 div 中添加 css 呢？

添加 css 怎么样？只需向新创建的 div 添加一个类。这可以帮助您更好地定位您的 div 并添加其他 css。

修改

$(this).after('<div>Please fill in the required field</div>');

到

$(this).after('<div class="info">Please fill in the required field</div>');

在CSS

中

<style>
.info{
background:#FFB0B0;
color:#FF0000;
}
</style>

2. 考虑有一个包含 5 个单选按钮的单选组。因此，仅当未选择至少一个并显示文本时，我才需要必需的文本 在那个广播组下面。现在所有需要的文本都来了 单选按钮。

3. 另外，如果用户点击提交 4 次，文本 每个字段添加 4 次。

添加标志可以解决这些问题

Answer 2

你必须设置jQuery validate函数的errorPlacement部分。

$("#form").validate({
    rules: {
        name: {
            required: true
        },
        firstname: {
            required: true
        }
    },
    messages: {
        name: {
            required: "Enter name"
        },
        firstname: {
            required: "Enter firstname"
        }
    },
    errorPlacement: function ($error, $element) {
        var name = $element.attr("name");

        $("#error" + name).append($error);
    }
});

示例： http://jsfiddle.net/R3aEQ/