JS код для проверки input полей на наличие класса success

Question

JS код для проверки input полей на наличие класса success

Юрий Шиков Ученик (47), на голосовании 1 год назад

Добрый вечер, помогите пожалуйста написать JS код который будет проверять имеют ли все input поля кроме input полей с id id_m и id_f класс success. Если нет, то кнопка с id registration_button становится disabled = false и серым цветом, если да, то становится обратно disabled = true и цветом 4070f7

Answer 1

франциск 1 Просветленный (24678) 1 год назад

 registration_button.disabled=[...document.querySelectorAll('input')].filter(i=>!(i.id=='id_m'||i.id=='id_f')).every(i=>i.classList.contains('success'));

а цвет добавь через css

Юрий ШиковУченик (47) 1 год назад

Можете пожалуйста добавить еще одно условие что выбран пол? Пол выбирается по радио input с айди id_m и id_f

Павел Просветленный (25620) Юрий Шиков, Добавь условие в метод every.

 registration_button.disabled = 
  [...document.querySelectorAll('input')]
    .every(i => i.classList.contains('success') || i.checked);

У всех input, которые не являются checkbox или radio, свойство checked должно быть false (судя по наблюдениям, проверил текстовые поля, с остальными думаю так же).

ПавелПросветленный (25620) 1 год назад

 registration_button.disabled = 
[...document.querySelectorAll('input:not(#id_m, #id_f)')]
  .every(i=>i.classList.contains('success'));

Исключить ID можно и в селекторе.

Answer 2

Яков Гото Искусственный Интеллект (320870) 1 год назад

Элементы console.log() можно удалить, они здесь только ради отладки.

 const inputs = document.querySelectorAll('.input'); 
const button = document.querySelector('#registration_button'); 
 
for (let i = 0; i < inputs.length; i++) { 
   if (inputs[i].id !== 'id_f' && inputs[i].id !== 'id_m') { 
      if (!inputs[i].classList.contains('success')) { 
         console.log(`%c ${inputs[i].outerHTML}`, 'color: red'); 
         button.disabled = 'false'; 
         button.style.background = 'gray'; 
         break; 
      } else { 
         console.log(`%c ${inputs[i].outerHTML}`, 'color: blue'); 
         button.disabled = 'true'; 
         button.style.background = '#4070f7'; 
      } 
   } 
}

ПавелПросветленный (25620) 1 год назад

Твой код не работает по 2 причинам:

Поиск input элементов в твоём коде ведётся по классу 'input'. В задаче не указано что input элементы имеют данный класс.
Кнопка включается/выключается после проверки отдельного input элемента, из-за чего достаточно того, что последний элемент имеет класс 'success'. Нужно чтобы все элементы имели класс 'success' а не только последний.

Яков Гото Искусственный Интеллект (320870)

Вот именно, что в задаче это не указано, а значит я могу своевольно использовать классы, которые мне использовать удобно. Тем более, чтобы убрать точку перед input, много ума не надо.
Ничего подобного, я код перепроверил с самыми разными комбинациями. Цикл проходит по всем элементам и каждый из них проверяет. Если хоть один из них не будет иметь класс success, без разницы, первый, из середины, или последний - цикл будет сразу же остановлен, перед этим применив disabled и серый цвет. Если if и else были поменяны местами, тогда бы только была проблема.