Question

我有一个包含两个输入字段和一个文本区域的表单。在我的js文件中，我有这个要求：

rules: {
                name: { //input field
                    required: true,
                    minlength: 5,
                    maxlength: 40,
                    diffname: true
                },
                email: { //input field
                    required: true,
                    email: true,
                    diffmail : true
                },
                message: { //textarea
                    required: true,
                    minlength: 3,
                    maxlength: 50,
                    diffname: true
                }
            }

在我的css文件中，我有一个错误类，当提交后字段出错时，它会将边框变为红色。这是我的班级：

input.error {
    border: 1px solid #f00;
        }

这是我的html表单：

<form method="post" id="send">
<input type="text" name="name" id="name" value="" /></br>
<input type="text" name="email" id="email" value="" /></br>
<textarea name="message" id="message"></textarea></br>
<button name="submit" type="submit">Send</button>
</form>

问题是这只适用于输入字段而不适用于文本区域。

Answer 1

更改input.error {... to

input.error, textarea.error { ...

或只是

.error{ ...

Answer 2

这应该适合你：

input.error, textarea.error {border: 1px solid #f00;}

由于您只定位input元素，因此您还需要定位textarea元素

请参阅小提琴：https://jsfiddle.net/jftf8a39/6/

如果不满足要求，如何在文本区域中显示红色边框？

2 个答案: