Как проверить есть ли класс у всех элементов в коллекции?

Question

[MaksimLav]

Есть форма, инпуты которых проверяются на соответствие регулярному выражению, и блок под этим инпутом с сообщением. Кнопка для отправки

<button type="submit" class="btn" disabled>Отправить</button>

изначально деактивирована.

Если значение инпута соответствует регулярному выражению, в блоке сообщения выводится нужное сообщение, и добавляется определенный класс к этому инпуту,

Пример для одного инпута:

1. Исходное состояние инпута

<div class="form-group">
	<label for="InputName">Имя</label>
	<input name="name" type="text" class="form-control" id="InputName" placeholder="Ваше имя" required>
        <div class="valid-message"></div>
</div>

2. Значение инпута соответствует регулярному выражению:

<div class="form-group">
	<label for="InputName">Имя</label>
	<input name="name" type="text" class="form-control is-valid" id="InputName" placeholder="Ваше имя" required>
         <div class="valid-message valid-feedback"></div>
</div>

инпуту .form-control добавляется класс .is-valid, а блоку сообщения .valid-message добавляется класс .valid-feedback

3. Значение инпута НЕ соответствует регулярному выражению:

<div class="form-group">
	<label for="InputName">Имя</label>
	<input name="name" type="text" class="form-control is-invalid" id="InputName" placeholder="Ваше имя" required>
         <div class="valid-message invalid-feedback"></div>
</div>

инпуту .form-control добавляется класс .is-invalid, а блоку сообщения .valid-message добавляется класс .invalid-feedback

Проверка повешена на событие потери фокуса $('.form input').blur(function() {});

Мне нужно - если ВСЕ инпуты заполнены верно, то есть, имеют класс .is-valid, делать кнопку доступной для нажатия, то есть убирать атрибутdisabled.

Не могу понять как проверить ВСЕ элементы на наличие класса (например через метод .each()) и если ВСЕ элементы соответсвуют условию, выполнять действие.

Ссылка на пример: https://codepen.io/maksimlavrenyuk/pen/rROWwV?edit...

Answer 1

[2cha.headz]

на кнопку повешал класс send-btn
проверяем наличие ошибок, если есть ошибки, значит блочим кнопку

var inputs = $('form input').length;
    var inputsValid =  $('form .is-valid').length;
       
    if(inputs == inputsValid) {
      $('.send-btn').attr('disabled',false);
    } else {
      $('.send-btn').attr('disabled',true);
    }

https://codepen.io/glagolew059/pen/QojppO

Comments

[Марат Гарифуллин]

Лучше так, имхо

const $form = $('.needs-validation');
$form.find('.send-btn').prop('disabled', !$form.find('.is-invalid').length);

[MaksimLav]

Спасибо за ответы! В голове тоже была мысль проверять количество инпутов и валидированных инпутов и сравнивать их.