无法取消表单提交

Question

I want to stop the form from submitting when the username is below 3 characters. I tried using return false but it didn't work. Below is the code (didn't used return false in this one) I am a beginner so please give an easy explanation 😅

    const messageElement = formElement.querySelector(".form__message");

    messageElement.textContent = message;
    messageElement.classList.remove("form__message--success", "form__message--error");
    messageElement.classList.add(`form__message--${type}`);
}

function setInputError(inputElement, message) {
  inputElement.classList.add("form__input--error");
  inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
};

function clearInputError(inputElement) {
    inputElement.classList.remove("form__input--error");
    inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
};

document.addEventListener('DOMContentLoaded', () => {
  const loginForm = document.querySelector("#login");
  const createAccountForm = document.querySelector("#createAccount");
  
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.add("form--hidden");
        createAccountForm.classList.remove("form--hidden");
    });
    
    document.querySelector("#linkLogin").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.remove("form--hidden");
        createAccountForm.classList.add("form--hidden");
    });
    
    loginForm.addEventListener("submit", e => {
      e.preventDefault();
      
      setFormMessage(loginForm, "error", "Invalid Username/Password Combination");
    });
    document.querySelectorAll(".form__input").forEach(inputElement => {
      inputElement.addEventListener("blur", e => {
        if(e.target.id === "signupUsername" && e.target.value.length < 3 ) {

setInputError(inputElement, "Username must be atleast 3 letters in length");
        }
      });
      inputElement.addEventListener("input", e => {
            clearInputError(inputElement);
        });
    });
 });```

Answer 1

For me this always works:

 function check_form(form) { var ok = confirm("is it ok?"); return ok }

 <form onsubmit="return check_form(this)"> <input> <input type="submit"> </form>

Bonus: if you want to asynchronously check the form and only then submit, it goes like this:

 function check_form(form) { setTimeout(function() { var ok = confirm("is it ok?") if (ok) { form.submit() } }, 100); }

 <form onsubmit="check_form(this); return false;"> <input> <input type="submit"> </form>