Как проверить заполнены ли инпуты с одинаковым классом с помощью js?

Question

[Hoqus]

Привет, не могу найти простое решение задачки где есть 4 разных инпута: имя, фамилия, мейл, телефон, все с атрибутом required и одинаковым классом. Есть 2 модалки, одна должна вылазить при заполненых полях, а другая при не заполненных.
Пол дня уже пробую всяко разно, но нужный результат так и не получился =(

Comments

[Владимир]

Где код ?

Answer 1

[Саман]

infoInputs = document.querySelectorAll(".input-class") // Получем все input через класс
for(var i=0; i < Object.keys(infoInputs).length; i++) { // Задаем цикл, чтобы проверить всех
    if(infoInputs[i].value.length != 0) { // если длина значения не равна нулю
        fulledInputs += 1 // прибавляем что этот инпут заполнен
    }
if (fulledInputs < 4) { // если заполненых инпутов меньше 4
    console.log(false) // выводим false
} else { // в других случаях
    console.log(true) // выводим true
}

Comments

[Hoqus]

можон ли тут к length чтото добавить или вместо него, чтобы сделать проверку более точной во избежание ситуаций когда пользователь ввел вместо номера телефона например половину номера или не до конца вписал почтовый адрес, а форма сочла инпуты валидными и отправила данные?
или под мой запрос код гораздо сложнее будет уже ?

[Саман]

В таком случае можно обойтись так. В этот раз я использовал функцию чтоб вам было удобнее

function buttonFunctionName() { // Функция по нажатии на кнопку
    infoInputs = document.querySelectorAll(".input-class") // При нажатии на кноку получаем обновленные значения input
    // infoInputs является массивом, поэтому чтоб обратиться к каждому инпуту, мы должны обращатсья как к массиву
    // infoInputs[0] = имя
    // infoInputs[1] = фамилия
    // infoInputs[2] = мейл
    // infoInputs[3] = номер
    // эти переменные как пример, вы должны сами обозначить их по номеру

    if (infoInputs[0].value.length > 2) { // если имя длиннее 2 символов
        infoInputs[0].isFulled = true // задаем новую переменную isFulled и даем true
    }
    if (infoInputs[1].value.length > 2) { // фамилия
        infoInputs[1].isFulled = true
    }
    if (infoInputs[2].value.length != 0) { // мейл может быть разной длинны взависимости от сервиса
        infoInputs[2].isFulled = true
    }
    if (infoInputs[3].value.length === 10) { // длина стандартного российского номера
        infoInputs[3].isFulled = true // каждому инпуту даем переменные isFulled и у каждого она своя
    }

    if (infoInputs[0].isFulled && infoInputs[1].isFulled && infoInputs[2].isFulled && infoInputs[3].isFulled === true) { // тут мы работаем так: если input[0] заполнен и input[1] заполнен и т.д., тогда выводим true
        console.log(true)
    } else { // в других случаях
        console.log(false)
    }
}

[Hoqus]

Саман,
// infoInputs[0] = имя
// infoInputs[1] = фамилия
// infoInputs[2] = мейл
// infoInputs[3] = номер
// эти переменные как пример, вы должны сами обозначить их по номеру
имелось ввиду что я всёж должен разделить свои инпуты например разным классом ? чтобы инструкция понимала какое условие применить к какому классу ?

[Саман]

Hoqus, Нет, класс остается тот же.
Мы с помощью него получили все инпуты, они в infoInputs[] записаны как массивы, поэтому, чтобы обратится к каждому, мы просто вписываем в квадратные скобки порядковый номер.Чтобы полностью понять это, откройте свой сайт с этим скриптом, введите в консоли infoInputs[0] и ваш первый инпут с таким классом выделится

[Hoqus]

Спасибо за скрипт и разьяснения!)

[Саман]

Hoqus, Если скрипт верный или же помог вам, пожалуйста отметьте ответ решением

Answer 2

[0xD34F]

все с атрибутом required

Если у них ещё и форма среди общих предков присутствует, то достаточно будет использовать checkValidity.

Ну а если непременно вручную надо проверять, то...

const className = 'здесь ваш класс';

Получаем input'ы:

const inputs = document.querySelectorAll(`.${className}`);

// или

const inputs = document.getElementsByClassName(className);

Проверяем заполненность:

const isFilled = [...inputs].every(n => n.value);

// или

const isFilled = !Array.prototype.some.call(inputs, n => !n.value);

// или

let isFilled = true;
for (const n of inputs) {
  if (!n.value) {
    isFilled = false;
    break;
  }
}

// или

let isFilled = true;
for (let i = -1; ++i < inputs.length && (isFilled = !!inputs[i].value);) ;

// или

const isFilled = !(function isEmpty(i) {
  return i < inputs.length && (!inputs[i].value || isEmpty(-~i));
})(0);

Comments

[Hoqus]

он соберёт в массив все мои инпуты пройдётся по каждому и сравнит значение их ?
не очень понимаю что тут происходит =)
и как условия внедрить сюда

[0xD34F]

Hoqus, здесь происходит то, о чём вы спрашивали. Что конкретно вам непонятно?

[Hoqus]

0xD34F, не очень понимаю как отрабатывает эта строчка
.every(n => n.value);
не могли бы расшифровать вкратце?

[0xD34F]

Hoqus, https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Hoqus]

0xD34F, спасибо