Валидация нескольких форм. Как ее реализовать?

Question

[svm2001]

Есть форма:

<form id="form_id" class="js-form">
                    <label class="popup-offer__title">Ваша почта</label>
                    <input type="email" id="email" class="email js-input js-input-email" placeholder="[e-mail]">
                    <label class="popup-offer__title">Ваш номер телефона</label>
                    <input type="tel" name="phone_number" class="tel js-input js-input-phone" placeholder="Телефон">
                <button type="submit" value="Submit" class="button">Отправить</button>
            </form>

и также 2 одинаковых формы (без почты)

<form id="form_id" class="js-form">
                    <label class="popup-offer__title">Ваш номер телефона</label>
                    <input type="tel" name="phone_number" class="tel js-input js-input-phone" placeholder="Телефон">
                <button type="submit" value="Submit" class="button">Отправить</button>
            </form>

JS такой:

let form = document.querySelector('.js-form'),
        formInputs = document.querySelectorAll('.js-input'),
        inputEmail = document.querySelector('.js-input-email'),
        inputPhone = document.querySelector('.js-input-phone');

    function validateEmail(email) {
        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    function validatePhone(phone) {
        let re = /^((\+7|7|8)+([0-9]){10})$/;
        return re.test(String(phone));
    }

    form.onsubmit = function () {
        let emailVal = inputEmail.value,
            phoneVal = inputPhone.value,
            emptyInputs = Array.from(formInputs).filter(input => input.value === '');

        formInputs.forEach(function (input) {
            if (input.value === '') {
                input.classList.add('error');

            } else {
                input.classList.remove('error');
            }
        });

        if (emptyInputs.length !== 0) {
            console.log('inputs not filled');
            return false;
        }

        if(!validateEmail(emailVal)) {
            console.log('email not valid');
            inputEmail.classList.add('error');
            return false;
        } else {
            inputEmail.classList.remove('error');
        }

        if (!validatePhone(phoneVal)) {
            console.log('phone not valid');
            inputPhone.classList.add('error');
            return false;
        } else {
            inputPhone.classList.remove('error');
        }
    }

Когда в html одна форма, все работает отлично.
Когда добавляю вторую и третью, и начинаю проверять, у меня класс error применяется ко всем инпутам в остальных двух формах. А мне нужно, чтобы код работал только в той форме, где я ввожу данные. Помогите код дописать?

Answer 1

[ildar-meyker]

Вы выбираете все элементы, а не в рамках заданной формы. Поэтому и получается, что класс добавляется ко всем. Ищите элементы в рамках формы.

formInputs = document.querySelectorAll('.js-input'),
inputEmail = document.querySelector('.js-input-email'),
inputPhone = document.querySelector('.js-input-phone');