Как проверить заполнены ли инпуты с одинаковым классом с помощью 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, Если скрипт верный или же помог вам, пожалуйста отметьте ответ решением