JavaScript onsubmit preventDefault无法有条件地工作

Question

If I use e.preventDefault() into onsubmit it is prevents form submission. But if I use it conditionally it doesn't work. See below code:

 var register = document.getElementById('registerForm'); register.onsubmit = function(e){ e.preventDefault(); //it is working } register.onsubmit = function(e){ if(5==5){ e.preventDefault(); // it is not working } } 

 <form action="#" id="registerForm"> <input type="text" id="username"> <input type="submit" id="submitBtn"> </form> 

Answer 1

That code's working fine. But, some other event is not allowing it to run. Could be some Console errors too. But, if you wanna break the flow, you can also do this:

register.onsubmit = function (e) {
  if (5 == 5) {
    return false;
  }
}

But remember, the above code will break all the further instructions attached to the particular event after this is executed.

Answer 2

Try this. I use it in Nette Framework and it works. But you have to create "fake button" and hide the real submit button. HTML:

<form method="post" id="registerForm">
    <input type="button" id="fakeSubmitButton" />
    <input type="submit" id="submit" style="visibility:hidden" />
<form>

JS: var register = document.getElementById('registerForm'); var fakeBtn = document.getElementById('fakeSubmitBtn');

fakeBtn.click(function(e) { //user clicks on the fake submit button
    if ( 5==5 ) {
        e.preventDefault();
    } else {
        register.submit(); //call submit on real submit button
    }
});

Answer 3

Why not debug by adding breakpoints if you think something is strange in those lines? Or put the code you are suspecting in try catch block and see if catch gets invoked.

Because 5==5 will always be true and that if condition doesn't makes a difference.