如何在文本區域中顯示不符合要求的紅色邊框？

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 {...到

input.error, textarea.error { ... 

或只是

.error{ ... 

Answer 2

這應該爲你做它：

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

由於您只瞄準input元素，您還需要指定textarea元素

見琴：https://jsfiddle.net/jftf8a39/6/