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

我有一个html表单，输入类型为文本，单选按钮class=required。我正在尝试验证表单。提交表单时，我需要验证表单，如果表单返回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;
}
});

$（'#test_form.required'）。过滤器（':visible'）。每个（函数（）{
var输入=$（此）；
如果（$（this）.is（':empty'））{
$（this.css（“border”，“2px solid#FF0004”）；
$（此）.after（'请填写必填字段'）；
返回=假；
}否则{
返回true；
}
});

现在出现了两个问题。 1.所需的文本是下面的字段。我需要在红色和字体大小-10px。那么如何将css添加到新添加的div中呢？ 2.考虑有一个无线电组的5个单选按钮。因此，我需要所需的文本，只有当至少一个没有被选中，并显示下面的广播组的文本。现在，所有单选按钮都将显示所需的文本。 3.此外，如果用户单击提交4次，则每个字段将添加4次文本。我想我们可以用旗子来处理这个问题

有谁能在这方面指导我吗

所需的文本是下面的字段。我需要在红色和字体大小-10px。那么如何将css添加到新添加的div中呢

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

修改

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

$（this）.after（'请填写必填字段'）；

到

$（this）.after（'请填写必填字段'）；

在CSS中

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

.info{
背景#FFB0B0；
颜色：#FF0000；
}

<代码> 2。<代码>考虑有5个单选按钮的无线电组。因此，我需要所需的文本，只有当至少一个没有被选中，并显示文本 在那个电台下面。现在所需的文本将用于所有 单选按钮

3.

如果用户单击提交4次，文本 为每个字段添加4次

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

所需的文本是下面的字段。我需要在红色和字体大小-10px。那么如何将css添加到新添加的div中呢

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

修改

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

$（this）.after（'请填写必填字段'）；

到

$（this）.after（'请填写必填字段'）；

在CSS中

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

.info{
背景#FFB0B0；
颜色：#FF0000；
}

<代码> 2。<代码>考虑有5个单选按钮的无线电组。因此，我需要所需的文本，只有当至少一个没有被选中，并显示文本 在那个电台下面。现在所需的文本将用于所有 单选按钮

3.

如果用户单击提交4次，文本 为每个字段添加4次

---

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

您必须设置函数的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);
    }
});

---

示例：

您必须设置函数的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);
    }
});

---

示例：

谢谢Mevin..现在文本的类正确出现..对于单选组，他们在代码中为所有单选按钮保留class=“required”，这可能是所有5个单选按钮都出现文本的原因..谢谢Mevin..现在文本的类正确出现..对于单选组，在代码中，他们为所有单选按钮保留class=“required”，这可能是所有5个单选按钮的文本出现的原因。嗨，希拉格，谢谢你的回复。是的，使用jquery验证插件我们可以做到这一点。但是我们不想使用它，因为有很多元素需要改变，我们有很短的时间。所以我们正在尝试上述方法。嗨，希拉格，谢谢你的回复。是的，使用jquery验证插件我们可以做到这一点。但是我们不想使用它，因为有很多元素需要改变，我们有很短的时间。因此，我们正在尝试上述方法。