Return false does not work Typescript

Question

I am making a code with Typescript and I check if a field has less than 9 digits, if it has less than 9, should not proceed to Ubmit, but for some reason it is proceeding.

<form method="post">
  Nome: <input type="text" id="nome"/>
  <button type="submit" id="enter">Submit</button>
</form>

My typescript code looks like this:

document.getElementById("enter").addEventListener("click", function () {
  if ((<HTMLInputElement>document.getElementById("nome")).value.length < 9) {
    (<HTMLInputElement>document.getElementById("tet")).innerHTML = "O Campo \"Nome\" deve conter 9 dígitos.";

    setTimeout(function () {
      (<HTMLInputElement>document.getElementById("tet")).innerHTML = "";
    }, 5000);

    return false;
  }
});

and is inside a

window.onload = function () {}

and right after him, still inside the onload has a

(<HTMLInputElement>document.getElementById("form")).addEventListener("submit", function () {
});

still inside the window.onload.

What am I doing wrong?

Answer 1

What happens there is that the form submission is being triggered the moment you click the button.

To prevent this, it is possible to use the method preventDefault() and then fire the Submit manually.

Note that if there are other forms on the page you need to specify which form should be submitted.

Take an example:

document.getElementById("enter").addEventListener("click", function (e) { 
    e.preventDefault(); // Previne que o submit seja disparado

    const nomeEl = document.getElementById("nome");
    
    if (nomeEl.value.length >= 9) {
        document.querySelector('form').submit(); // Faz o submit
    }
    else {        
        console.log("O Campo \"Nome\" deve conter 9 dígitos.");
    }
});

<form method="post">
  Nome: <input type="text" id="nome"/>
  <button type="submit" id="enter">Submit</button>
</form>