Unable to cancel form submit

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);
        });
    });
 });```

Use `console.log` in this `loginForm.addEventListener("submit"` to check if this function executing or not — Dinesh, Jul 10 '22 at 08:50
Does this answer your question? [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Mohit Sharma, Jul 10 '22 at 08:56

IT goldman · Answer 1 · 2022-07-10T09:33:37.770

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>

Unable to cancel form submit

1 Answers1

Linked