jQuery addClass not working when adding to "this" object variable

Question

Hi. I am trying to add an error class to an input textbox to show a user that their input is invalid.
In the change event I am getting a reference to, what I presume is the input field and storing it in a variable.
Calling addClass on the variable does not work as expected. I have firebugged the code and $textBox is the correct textbox so I am not sure what I am missing here. I have many inputs that have the class "edit-budget-local" so I need to target the changed textbox. Thanks.

  $("input.edit-budget-local").change(function () {

    var $textBox = this;

    var newValue = $textBox.value;

    if (newValue.match(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/) == null) {

        $textBox.addClass("error");
    }


});

Answer 1

Try

$textBox = $(this);

although there seems to be a bug (in terms of using jQuery) at ln 5 where newValue should be $textBox.val();

Answer 2

You need to change this line: var $textBox = $(this); so that you have actually cached a copy of a jQuery object, not just the input.

Answer 3

The "this" that is returned is not a jQuery object. Try replacing the line

  var $textBox = this;

with

  var $textBox = $(this);

Answer 4

you have error here, $textBox.addClass("error");

try like this, $("textBox").addClass("error");

Answer 5

This should work if your selector and regex is correct

$("input.edit-budget-local").change(function () { 
    var textBox = $(this); 
    var newValue = textBox.val(); 

    if (newValue.match(/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\.\d+)?$/) == null) { 
        textBox.addClass("error");
    } 
});