I have a form with two input fields and a text area. In my js file i have this requirments:

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
                }
            }

In my css file I have an error class that turns borders into red when the fields have an error after submit. Here is my class:

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

and here is my html form:

<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>

The problem is that this is working only for the input fields and not for the text area.

I have a form with two input fields and a text area. In my js file i have this requirments:

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
                }
            }

In my css file I have an error class that turns borders into red when the fields have an error after submit. Here is my class:

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

and here is my html form:

<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>

The problem is that this is working only for the input fields and not for the text area.

• javascript
• html
• css

• Share your html because you are using input.error{} my guess is that you need to target the "text" but without seeing the html we cannot target the right element for you – Adam Buchanan Smith Commented Jun 8, 2016 at 20:40
• 1 try changing your css selector to input.error, textarea.error { border: 1px solid #f00; } – Jaqen H'ghar Commented Jun 8, 2016 at 20:43
• instead of using input.error, just have it be .error – Cruiser Commented Jun 8, 2016 at 20:44
• @JaqenH'ghar is right add textarea.error too in css. – riteshmeher Commented Jun 8, 2016 at 20:45
• Just .error would also make it easier if you have to support drop downs. – Ruan Mendes Commented Jun 8, 2016 at 20:50

2 Answers 2

This should do it for you:

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

Since you are only targeting the input elements, you need to also target the textarea elements

See fiddle: https://jsfiddle/jftf8a39/6/

Either change input.error{ ... to

input.error, textarea.error { ...

or just

.error{ ...