Question

On button click, I’m checking if any input with the class ‘req’ is empty. I want to change the border of only the empty inputs to red. Here is my code.

$('#btnUpdateOrder').click(function () {
        if ($('.req').attr('value').trim() == '') {
            $(this).css('border', '1px solid red');
            alert('All fields in the ship to and bill to areas must be completed');
            return false;
        }
    });

But my code makes the button’s border red, not the input. Any help would be appreciated.

Answer 1

this refers to the button. You could use filter to reduce the matched set of elements to those that are empty and then apply the CSS to that set:

$(".req").filter(function() {
    return $.trim(this.value) === "";
}).css("border", "1px solid red");

Note that I’ve used the jQuery trim function because the native function is not available in older browsers.