Почему функция не отменяет отправки формы

Question

У меня есть вот такая функция в static/main.js:

  function getCookie(cookieName) {
    const name = cookieName + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookieArray = decodedCookie.split(';');
    
    for (let cookie of cookieArray) {
        while (cookie.charAt(0) == ' ') {
            cookie = cookie.substring(1);
        }
        if (cookie.indexOf(name) == 0) {
            return cookie.substring(name.length, cookie.length);
        }
    }
    return "";
}

var UserDataGet = async (token) => {
    const userRequest = await fetch(`/api/GetUserInfo?token=${token}`);
  
    if (await userRequest.ok) {
      const userData = await userRequest.json();
      if (Object.keys(userData).length === 0) {
        return "0"; 
      } else {
        return userData;
      }
    } else {
      return "0";
    }
  };

var DataValidate = async () => {
  if ( await UserDataGet(getCookie("token")) == "0") {
    alert("you are not registred");
    return false
  }

  else {
    return true
  }
}

И вот такая форма:

<form method="POST" enctype="multipart/form-data" onsubmit = "return DataValidate()"> 
  <label for="Message">Write your message</label>
  <input name="Message" type="text">

  <input name="TopicId" type="hidden" value="">

  <input name="AuthToken" type="hidden" value="">

</form>

функция DataValidate() проверяет, зарегистрирован ли пользователь. Если нет, то возвращает false.Сама функция сама работает нормально. Но как мне возвращать в форму результат функции DataValidate()?

Answer 1

Современные практики рекомендуют перенести логику запроса в js (использовать fetch), так как это отделит визуализацию от обработки dataflow. К тому же, у вас уже подключен javascript на странице. Хотя вариант с формой минималистичен и может лучше подходить для ситуаций, когда требуется простая форма в простом проекте. Зависит от проекта.

Ваша форма отправляется, потому что функция DataValidate асинхронная и возвращает Promise, как и любая асинхронная (async) функция. А Promise — это объект, а объект — это truthy значение, которое всегда приводится к true. То есть, ваша функция всегда возвращает значение, воспринимаемое как true.

А что касается вашего кода, вот рабочий вариант (для отмены события используется объект SubmitEvent):

Из

onsubmit = "return DataValidate()"

В

onsubmit = "DataValidate"

Из

var DataValidate = async () => {
  if ( await UserDataGet(getCookie("token")) == "0") {
    alert("you are not registred");
    return false
  }

  else {
    return true
  }
}

В

var DataValidate = async (event) => {
  if (await UserDataGet(getCookie("token")) == "0") {
    alert("you are not registred");
    event.preventDefault();
  }
}

БЛОГ НА HUSL

Почему функция не отменяет отправки формы

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