@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...
  • Вопрос задан
  • 201 просмотр
Решения вопроса 1
@glagolew059
frontend developer
на кнопку повешал класс 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы