Adding a class to textboxes using jquery

Question

I need to use a jquery function to add a css class I have created to textboxes on a form. This class will change the border of the textbox to red, to indicate that there is an error in the textbox and that the user cannot submit until the error is fixed. Here is my current code:

function validateRequired() {
    var obj = $('.validate');
    var message = ""; 
    if (obj == null) {
        return message;
    }
    obj.each(function (index, elem) {
        if (elem.value == "") {
            message += splitCamelCase(elem.id);
            elem.attr("class", "error");
        }
    });

    return message;
}

For whatever reason, though I've used this in other points in the code to check and set attributes, I keep getting an error saying:

The property or method (elem.attr("class", "error");) is unsupported.

How can I set the border of the textbox to red using jquery?

I've tried that as well, and it still blows up. I'll try it again, though, because I could have very well had a typo. EDIT: I did in fact try running it with .addClass again, and it gives the same error as .attr. Thanks for the input, though! — Kendra
– Kendra, Commented Jul 24, 2013 at 21:45
elem is the raw HTMLElement. You need to wrap it in $(elem), or do elem.className = 'error'. — kalley
– kalley, Commented Jul 24, 2013 at 21:45
@kalley Why don't you make an aswer with that comment :) It is the good answer anyway. — Karl-André Gagnon
– Karl-André Gagnon, Commented Jul 24, 2013 at 21:46
FYI: HTML5 allows you to specify a custom validity checking function, and also defines the ':invalid' psuedo-class CSS selector which you can use for styling. setCustomValidity() , :invalid — dsh
– dsh, Commented Jul 24, 2013 at 21:55

kalley · Accepted Answer · 2013-07-24 21:47:50Z

3

elem is the raw HTMLElement. You need to wrap it in $(elem), or do elem.className = 'error'

answered Jul 24, 2013 at 21:47

kalley

18.5k2 gold badges41 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Unknown · Accepted Answer · 2013-07-24 21:47:25Z

0

You could try to do instead of attribute:

    //...
    message += splitCamelCase(elem.id);
    $('this').addClass("error");

    //...

answered Jul 24, 2013 at 21:47

Unknown

1613 bronze badges

Collectives™ on Stack Overflow

Adding a class to textboxes using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related