Question

我有一个带有输入类型文本的html表单和带有class = required的单选按钮。我正在尝试验证表单。在提交表单时，我需要验证表单，如果它返回false，我需要添加一个新的div（文本＆＃34;请填写必填字段＆＃34;）并在字段下面以红色显示。如果用户填写该字段，它应该变为绿色或红色应该消失。 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

所需的文字正在字段下方。我需要红色和字体大小 - 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次。

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

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/

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

2 个答案: