1

我有一个带有输入类型文本的 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;
}
});

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

有人可以指导我吗？

4

2 回答 2

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

添加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 次。

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

于 2013-10-11T06:09:44.173 回答
0

您必须设置jQuery 验证功能的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/

于 2013-10-11T06:26:37.817 回答