Проверьте, все поля ввода заполнены с помощью jQuery

У меня есть 3 divs, каждый из которых имеет поле ввода dfew и следующую кнопку. Я хочу написать фрагмент jQuery, который при нажатии следующей кнопки проверяет, чтобы все поля ввода WITHIN того же div, что и кнопка, не были нулевыми.

Я пробовал следующее без везения, но Im 100% уверен в его неправильности, только я не могу найти соответствующую информацию в Интернете...

http://jsfiddle.net/xG2KS/1/

Ответ 1

Вы можете использовать filter, чтобы уменьшить количество всех элементов input только до тех, которые пусты, и проверить свойство length того, что остается

$(".next").click(function() {
    var empty = $(this).parent().find("input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        //At least one input is empty
    }
});

Обратите внимание, что определение пустого в приведенном выше коде является пустой строкой. Если вы хотите обрабатывать пустое пространство как пустое, вы можете обрезать значение перед сравнением.

Также обратите внимание, что нет необходимости передавать this в jQuery внутри функции filter. Сам элемент DOM будет иметь свойство value, и гораздо быстрее получить доступ к нему вместо использования val.

Здесь обновленная скрипта.

Ответ 2

$('.next').click(function() {
    var emptyInputs = $(this).parent().find('input[type="text"]').filter(function() { return $(this).val() == ""; });
    if (emptyInputs.length) {
        alert('Fail!');
    }
});

Ответ 3

$('.next').click(function() {
    var inputs = $(this).parent().find('input[value=""]');
    if (!inputs.length) {
        // you have empty fields if this section is reached
    }
});

Ответ 4

Поскольку в этом случае нет селектора jQuery, вы можете расширить возможности селектора jQuerys.

Предполагая, что вы выбираете все : текстовые элементы, расширение:

$.extend($.expr[':'],{
     isEmpty: function(e) {
         return e.value === '';
     }
});

Следовательно, вы можете выбрать все пустые текстовые поля:

$(this).closest('div').find(':text:isEmpty');

$.extend($.expr[':'], {
  isEmpty: function (e) {
      return e.value === '';
  }
});
$('.next').click(function () {
      var missingRequired = $(this).closest('div').find(':text:isEmpty');
  console.log('Empty text fields: ' + missingRequired.length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="next" class="next" />
</div>
<div>
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="next" class="next"  />
</div>
<div>
    <input type="text" /><br />
    <input type="text" /><br />
    <input type="submit" value="next" class="next"  />
</div>