Как принудительно выполнить event.preventDefault()?

#javascript #django #fetch

#javascript #django #выборка

Вопрос:

Внутри моей функции выборки я отправляю mail переменную через POST-запрос на мой сервер в формате JSON. На моем сервере я открываю свою базу данных и проверяю, существует ли mail , и если это так, я добавляю в свой jsoned dict строку {"exists":"exists"} , чтобы я знал, что она существует. Затем, все еще на стороне сервера, я возвращаю JsonResponse моего dict обратно в js. Я хочу, чтобы мой javascript определял, существует ли он, поэтому я ищу строку, которую я добавил в свой dict. Я ищу result.exists в своем скрипте.

Я только хочу, чтобы форма не была отправлена, если электронное письмо не существует, и хочу, чтобы форма была отправлена, если электронное письмо уже существует. Итак, я делаю:

 document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('#laform, #elform').addEventListener("submit", function(event) {


    var content = document.querySelector('#elcontent').value;

    fetch("", {

      method: 'POST',
      body: JSON.stringify({
        mail: document.querySelector('#email').value,
        name: document.querySelector('#name').value
      }),
      headers: {
        "Content-type": "application/json; charset=UTF-8",
        "X-CSRFToken": getCookie('csrftoken')
      }
    })
    .then(response => response.json())
    .then(result => {
        // Print result
 
        if (result.exists === undefined) {

            event.preventDefault();

              if (content.length > 700) {
                  popup_content('show');

               }
        }
    });
  });
})

  </script>

Но здесь возникает большая проблема. Внутри .then() слишком поздно добавлять event.preventDefault() , поэтому я не знаю, как остановить отправку формы при этом условии. Я не могу удалить это из .then() , потому что я хочу это только при этом условии. Есть идеи?

1. Рассматривали ли вы возможность использования event.preventDefault() в начале прослушивателя событий и отправки формы с помощью form.submit() после того, как вы найдете result.exists !== undefined ?

2. Я не думал об этом. Спасибо @RifatBinReza

Ответ №1:

Вызывайте preventDefault() независимо от того, является ли событие доверенным (инициируется действием пользователя). Внутри выборки, если результат не существует, отправьте форму, вызвав .submit() ее (что приведет к ненадежному событию):

 document.addEventListener("DOMContentLoaded", function() {
  document.querySelector('#laform, #elform').addEventListener("submit", (event) => {
    if (!event.isTrusted) {
      // Submission was done via JS, not user; submit form
      return;
    }
    const content = document.querySelector('#elcontent').value;
    fetch("", {
        method: 'POST',
        body: JSON.stringify({
          mail: document.querySelector('#email').value,
          name: document.querySelector('#name').value
        }),
        headers: {
          "Content-type": "application/json; charset=UTF-8",
          "X-CSRFToken": getCookie('csrftoken')
        }
      })
      .then(response => response.json())
      .then(result => {
        // Print result
        if (result.exists === undefined) {
          if (content.length > 700) {
            popup_content('show');
          }
        } else {
          // Submit form, resulting in untrusted event:
          this.submit();
        }
      });
  });
})