preventDefault does not work

Asked

Viewed 346 times

4

The next form:

<form id="form_id" method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" autocomplete="off" onsubmit="valida_form()">

I have a function that checks for blank spaces:

function valida_form(evt)
{   Array.from(document.getElementById("form_id")).forEach(function(element,index)
    {   if(element.value === "")
        {   form_err++;
        }
    });
    if(form_err > 0)
    {   alert("Há erros:"+form_err);
        evt.preventDefault();
    }else
    {   alert("Sem erro"+form_err);
    }
}

meanwhile the formcontinues to be sent.

I’m learning the passage of arguments, and callbacks then if the error is something related, I appreciate the explanation.

javascript

  • I think we’re missing the scope here valida_form(this) and alert is blocking, could prevent his default event or exchange for console

  • if it says on the form tag, if it is I tried..?

  • That’s right @Magichat, onsubmit="valida_form(this)"

  • So I tried this tmb... it alerts the error and Talz, but sends the form,,

  • for testing, put the evt.preventDefault() in the first line of the function body

  • following him is not recognizing the element of preventDefaut...he says: evt.preventDefault is not a function...this leaving the method where it is equal in the question example

  • For some reason in the tag it does not "recognize" the preventDefault, maybe because it is a function invoked or because it processes Submit differently, this is how it works, see: https://jsfiddle.net/lbclucascosta/xvf80gy0/

Show 2 more comments

1 answer

5


The preventDefault does not work when Event Listener is set inline in HTML (onsubmit="..."). Use addEventListener:

document.getElementById('form_id').addEventListener('submit', valida_form, false);

When you use inline, the function needs to return false to cancel the standard operation. And Handler inline needs to return the function result: onsubmit="return funcao()". There is also the possibility of passing an object event global in the call, as Anderson Carlos Woss commented below. But this is not standard and cannot not work in all browsers. The most recommended is to use addEventListener even.

  • 2

    It doesn’t work because the event is not passed by parameter in the call, but if passing it would work, right? For example: onsubmit="valida_form(event)", or, within the function check the existence of the event with if (!evt) evt = window.event.

  • It worked with addeventlistener... Now to call her inline, I called all that is name..."evt,e,Event, this,(fdp)"...num was Naum

  • I’m not sure if it would work, I need to test. The existence of global Event is not standard, better to avoid.

  • @Andersoncarloswoss You’re right, it does work if the global event is available. In Chrome at least.

  • 1

    Exactly. I did the tests and it worked, but I didn’t find any documentation to prove a pattern of behavior in it. Ideally, use the addEventListener that it is certain the passage of the event.

  • 1

    @Andersoncarloswoss mentioned this in the reply. I have now tested on Chrome, FF and Safari, the 3 in OSX, current versions, and worked on all the event global. It used to not work in FF, sure. It stays here a test for future checks.

Show 1 more comment

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.