Ошибка в JS функциях при отправке формы на почту?

Question

[Danila232]

При отправке формы с текущим годом выдаёт ошибку "Uncaught (in promise) TypeError: this.querySelectorAll is not a function".
Мне кажется дело в том что IF в функции postSend() не видит 'return result' в validation()
но может я ошибаюсь. Подскажите пожалуйста в чём тут дело

<form action="" class="form__form-body" method="post" id="form">
            <div class="form__group">
                <div class="form__label-block">
                    <input type="text" class="form__input" placeholder="ФИО" id="input-1" name="name">
                    <label for="input-1" class="form__label">имя</label>
                </div>
            </div>
            <div class="form__group">
                <div class="form__label-block">
                    <input type="tel" class="form__input" placeholder="[phone]" id="input-2" name="phone">
                    <label for="input-2" class="form__label">телефон</label>
                </div>
            </div>
            <div class="form__group">
                <div class="form__label-block">
                    <input type="email" class="form__input" placeholder="[e-mail]" id="input-3" name="email">
                    <label for="input-3" class="form__label">почта</label>
                </div>
            </div>
            <button class="btn form__btn">
                Отправить
            </button>

            <div class="form-done">
                <span>HELIOS</span>
                <div class="form-done__text">
                    <h3>Заявка отправлена!</h3>
                    <p>Мы ответим вам в течение часа :)</p>
                </div>
            </div>
        </form>

function validation() { // возвращает true/false 
 
        let result = true 
 

        let formInputs = this.querySelectorAll('.form__input') 
        formInputs.forEach(input => { 
 
            if (input.value == '') { 
                result = false 
            } 
        }) 
 
 
        return result 
    } 
 
     
    // функция для отправки на ПОЧТУ 
    async function postSend(e) { 
 
        e.preventDefault() 
 
        let formData = new FormData(this) 
 
        // скорее всего что-то не то здесь. С 'return result' и if-ом. 
        if (validation()) { 
 
            let response = await fetch('mailer.php', { 
                method: 'POST', 
                body: formData 
            }) 
 
            if (response.ok) { 
                let formOverlay = this.querySelector('.form-done') 
                formOverlay.classList.add('active-form') 
                alert('Отправлено') 
                return await response.text() 
            } else { 
                alert('Ошибка на сервере!') 
                this.reset() 
            } 
 
        } 
 
    }  
     
    let allForms = document.querySelectorAll('form') 
    allForms.forEach((form) => { 
        form.addEventListener('submit', validation); 
        form.addEventListener('submit', postSend); 
 
    })

Answer 1

[Ivan Ustûžanin]

дело в непонимании как работает this в JavaScript

1) в обработчиках нужно использовать e.target, т.к. это не jQuery
2) e.target нужно передавать и в validation(), а не полагаться на this (который в данном случае будет window)
3) добавлять validation в addEventListener не нужно

Comments

[Danila232]

по 3му пункту - да, я там забыл убрать, просто смотрел, измениться ли что-то

не очень понял про e.target в validation(). Я там let formInputs = event.target.querySelectorAll('.form__input') сделал(до этого было this), выдаёт ошибку "Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'target')".

function validation(event) { // возвращает true/false

        function removeError(input) {
            let inputParent = input.closest('.form__group')

            if (input.classList.contains('error')) {
                inputParent.querySelector('.error-label').remove()
                input.classList.remove('error')
            }
        }

        function createError(input, text) {
            let inputParent = input.closest('.form__group')
            let errorParagraph = document.createElement('p')

            input.classList.add('error')
            errorParagraph.classList.add('error-label')
            errorParagraph.textContent = text

            inputParent.append(errorParagraph)
        }


        let result = true

        let formInputs = event.target.querySelectorAll('.form__input')
        formInputs.forEach(input => {

            removeError(input)

            if (input.value == '') {
                createError(input, 'Поле не заполнено!')
                result = false
            }
        })

        return result
    }

[Ivan Ustûžanin]

Danila232, а if (validation(e)) в postSend() есть?

[Danila232]

IvanU7n, а, туда забыл тогда добавить. Сейчас добавил и заработало. Спасибо вам большое! Очень долго мучался с этим

Но я если честно не очень понял, почему мы не можем использовать this вместо e.target. This - в функции, которая передана в слушатель - равна элементу, на который этот слушатель повесиили. Поэтому например let formData = new FormData(this) в postSend() работает. Потому что this здесь = form

Поэтому я думал что this в validation() тоже будет равен элементу form

[Ivan Ustûžanin]

Danila232,

This - в функции, которая передана в слушатель - равна элементу, на который этот слушатель повесиили

да, про это написано в документации

When attaching a handler function to an element using addEventListener(), the value of this inside the handler will be a reference to the element. It will be the same as the value of the currentTarget property of the event argument that is passed to the handler.

однако validation() это другая функция со своим this, чтобы там был правильный this её нужно соответственно вызывать, т.е. что-то типа validation.call(this)

[Danila232]

IvanU7n, кстати да. Может надо было в postSend написать: if (validation.call/apply(this)) { ..тело validation..} и тогда бы заработало без e.target