Question

This is very frustrating. This is part of some code written for a form. The input element that is associated with a validation error should display a red border. It works with the .css method, but I’d be grateful if someone could show me why the .addClass method isn’t working.

<style type="text/css">
    .field_error{color:red;}
    .red_border{border:1px solid red;}
</style>

<script>
    $(document).ready(function(){
        $('.field_error').siblings().addClass('red_border');
    });
</script>
...
<label class="description" for="element_1">Email Address </label>
            <div>
            <input id="element_1" name="email" class="element text medium" type="text"/> 
                {% if form.email.errors %}
                    <div class="field_error">{{form.email.errors}}</div>

                {% endif %}
                     </div>

                      ..etc..

If assign “element_1” only one class, it works just fine.

I can also do this instead:

$('.field_error').siblings().css("border", "1px solid red"); 

However, I plan on adding a lot of content to the class I will add. Is there a way to get the addClass method to work?

Thanks!!

Matt

IMPORTANT EDIT

I forgot to add in the multiple classes on my code. No wonder some people are confused. Please review code again.

<input id="element_1" name="email" class="element text medium" type="text"/> 

Solved

The problem was that I had css file that defined the borders of the text input element already. Fixed now. Thanks to all who brain stored with me.

Answer 1

Works for me: http://jsfiddle.net/JAAulde/KPckC/1/ (updated with your multiple class correction)

You do have a typo in your code, though:

<input id="element_1" name="email" class="element type="text"/>

should be

<input id="element_1" name="email" class="element" type="text"/>

Maybe that exists in your live site?