Обрабатываю ошибку, но json все равно открывается

Question

Так обрабатываю:

const notifications = (form, text, url) => {
    function getErrors() {
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            }
        })
            .then(response => response.json())
            .then(data => text.innerHTML = data.message);
    }

    form.addEventListener('submit', getErrors);
}

module.exports =  notifications;

Так делаю вход и отправляю json с ошибками:

router.post('/signin', async(req, res) => {
  try {
    const {email, password} = req.body;
    const findUser = await User.findOne({email});

    if (!findUser) {
      return res.status(404).json({message: 'Такого пользователя не существует!'});
    }

    const comparePassword = await bcrypt.compare(password, findUser.password);

    if (!comparePassword) {
      return res.status(404).json({message: 'Данные неверны!'});
    }

    req.session.user = findUser;
    req.session.auth = true;
    req.session.save((err) => {
      if (err) {
        throw new Error(err)
      }

      res.redirect('/profile/' + findUser._id);
    })
  } catch (e) {
    res.status(404).json({message: e});
  }
})

Когда нажимаю на кнопку submit, то сообщение появляется в html <p></p>, но сразу после появляется json страница, что не так?

Answer 1

submit формы всегда отправляет её не через ajax. Как следствие, после ajax запроса происходит её отправка стандартным путём. Чтобы этого не было, надо это событие предотвратить

function getErrors(e) {
    e.preventDefault;
    //...
    // всё остальное        
}

form.addEventListener('submit', getErrors);

https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault

Хочу заметить, что само действие навешивания слушателя form.addEventListener('submit', getErrors); не отменяет действие по-умолчанию, потому что addEventListener лишь добавляет ещё какой-то обработчик при событии submit, а не удаляет все предыдущие или отменяет

БЛОГ НА HUSL

Обрабатываю ошибку, но json все равно открывается

Ответы (1 шт):