Определите, какой вход с классом пуст

Question

При нажатии кнопки я проверяю, пуст ли какой-либо ввод с классом 'req'.Я хочу изменить границу только пустых входов на красный.Вот мой код.

$('#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;
        }
    });

Но мой код делает границу кнопки красной, а не ввод.Любая помощь будет оценена.

Answer 1

this относится к кнопке. Вы можете использовать filter, чтобы уменьшить соответствующий набор элементов до тех, которые пусты, а затем применить CSS к этому набору:

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

Обратите внимание, что я использовал функцию jQuery trim, потому что встроенная функция недоступна в старых браузерах.

Answer 2

Просто используйте $('.req') вместо $(this):

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