Determine which input with class is empty

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.

You should never use .attr('value') but rather .val() to get the value. — ThiefMaster
– ThiefMaster, Commented Feb 15, 2012 at 21:11
@boruchsiper - Yes, it does. It should work with any element that supports the value attribute. — James Allardice
– James Allardice, Commented Feb 15, 2012 at 21:22

James Allardice · Accepted Answer · 2012-02-15 21:12:58Z

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.

answered Feb 15, 2012 at 21:12

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

Comments

ThiefMaster · Accepted Answer · 2012-02-15 21:28:07Z

0

Simply use $('.req') instead of $(this):

$('#btnUpdateOrder').click(function() {
    $('.req').filter(function() {
        return $(this).val().trim() == '';
    }).css("border", "1px solid red");
});

edited Feb 15, 2012 at 21:28

answered Feb 15, 2012 at 21:12

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

1 Comment

boruchsiper Over a year ago

I would do that, except this will make all the inputs with class 'req' have a red border. I need only for the empty inputs to have the red border. Thanks for trying.

Collectives™ on Stack Overflow

Determine which input with class is empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related