当文本区域不符合要求时，如何在文本区域中显示红色边框

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, textarea.error {border: 1px solid #f00;} 

由于您仅面向input元素，因此还需要定位textarea元素

见小提琴：https://jsfiddle.net/jftf8a39/6/

Answer 2

要么更改输入.错误{ ...自

input.error, textarea.error { ...

或者只是

.error{ ...