Валидность группы инпутов

199
02 ноября 2018, 22:40

Всем привет Написал "слайдер" для опросника. Есть проблема. в 17 строке идет проверка на отмеченные чексбоксы и заполненные поля возникает проблема в 4 слайде там есть поля (обязательные для заполнения) и чекбокс (не обязателен) вот тут он и не работает

если вместо && поставить || то будет игнорировать чексбоксы. Прошу помощи у вас. Спасибо!

const _form = document.querySelector('.js-questionForm');
    const _control = document.querySelectorAll('.js-questionControl');
    const _number = document.querySelector('.js-questionNumber');

    Array.prototype.forEach.call(_control, el => {
        el.addEventListener('click', ev => {
            ev.preventDefault();
            const _target = ev.target || ev.currentTarget;
            const _parent = el.parentNode.parentNode;
            const _parentId = _parent.getAttribute('data-id');
            const _numberItem = _number.querySelector('span');
            const _numberValue = parseInt(_parentId);
            if (_target.classList.contains('js-questionNext')) {
                const _inputChecked = _parent.querySelector('input:checked');
                const _inputText = _parent.querySelector('input[type="text"]');
                if (_inputChecked || _inputText) {
                    if (_parentId !== '4') {
                        _number.classList.add('active');
                        _numberItem.innerHTML = `${1+_numberValue}`
                    } else {
                        _number.classList.remove('active');
                    }
                    if (_inputText) {
                        console.log(_inputText.vallue)
                        if (_inputText.vallue = '') {
                            const _error = _parent.querySelector('.error');
                            _error.classList.add('active');
                            setTimeout( () => {
                                _error.classList.remove('active')
                            }, 4000)
                        } else {
                            let _traX = _parentId;
                            _form.style.transform = `translateX( -${100*_traX}%)`;
                        }
                    }
                    let _traX = _parentId;
                    _form.style.transform = `translateX( -${100*_traX}%)`;
                } else {
                    const _error = _parent.querySelector('.error');
                    _error.classList.add('active');
                    setTimeout( () => {
                        _error.classList.remove('active')
                    }, 4000)
                }
            } else if (_target.classList.contains('js-questionPrev')) {
                if (_parentId !== '2') {
                    _numberItem.innerHTML = `${_numberValue-1}`
                } else {
                    _number.classList.remove('active');
                }
                let _traX = _parentId - 2;
                _form.style.transform = `translateX( -${100*_traX}%)`;
            }
        })
    });

Пример тут https://jsfiddle.net/DetyaJah/yr8kb7Lu/

Answer 1

Я изменил выбор input для поиска значения в них. Так как код:

const _inputText = _parent.querySelector('input[type="text"]');

Найдет только первый input, а у вас их два.

У меня получилось это вот так, надеюсь это то что вам надо. https://codepen.io/Lukyanenko/pen/gjNLEe?editors=1111

READ ALSO
Помогите разобраться в коде после set:

Помогите разобраться в коде после set:

Изучаю JS и в теме Дескрипторы, геттеры и сеттеры свойств столкнулся с примером кода, которого не понимаю Помогите, пожалуйста, разобраться,...

180
Навигация VUE.js

Навигация VUE.js

Всем привет,имеется вот такая страница,меня интересует как сделать так,чтобы при клике например на "повреждения" отображался другой лист,а...

195
Как сделать динамический popup на Vue.js?

Как сделать динамический popup на Vue.js?

Сделал простой попам на vue, вызывается через метод alert(text), в качестве аргумента передается простой текст

283