My code does not abort form submission as it should

Asked

Viewed 462 times

3

I made a form, and before sending I check if the person typed the user and password. I put this in the event submit, but it doesn’t seem to work.

The code:

<script>
subimitar = function(){
    if(document.getElementByName("usuario").value == ""
      ||
       document.getElementByName("usuario").senha == ""
      ){
        alert("você tem que digitar os campos usuario e senha")
    return false;   
    }     
}
</script>

The html:

<form action="/" method="post" onsubmit="subimitar()">
    Usuario
    <input type="text" name="usuario"/>
    Senha
    <input type="text" name="senha"/>
    <input type="submit" value="entrar"/>
</form>
javascript html

3 answers

6


You have two big problems with your code:

  1. To function as you want, you need another return within the onsubmit:

    onsubmit="return subimitar()"

  2. Your Javascript uses a function that does not exist, getElementByName. The correct function is getElementsByName (Elements, plural), but in this case I recommend that you give an ID to your fields and use getElementById. Another alternative is to use document.querySelector("[name=usuario]").value, that works in modern browsers.

3

Just a few adjustments.

See the changes:

  • Added Ids in the two form inputs
  • Change the getElementByName for getElementById, to individually return each element of our interest
  • Added return true; no JS, to make explicit the positive return
  • Added the return in the onsubmit, as mentioned by @bfavareto, so that the return of the function really goes back to the form (to block sending, if it is false)

Script:

<script>
function subimitar(){
    if(
        document.getElementById("usuario").value == ""
        ||
        document.getElementById("senha").value == ""
    ){
        alert("você tem que digitar os campos usuario e senha");
        return false;   
    }     
return true;   
}
</script>

HTML:

<form action="/" method="post" onsubmit="return subimitar()">
    Usuario
    <input type="text" id="usuario" name="usuario"/>
    Senha
    <input type="text" id="senha" name="senha"/>
    <input type="submit" value="entrar"/>
</form>

See working on JS Fiddle

1

Just some good practice considerations:

  1. Do not use attributes on* directly in HTML, as it makes changes difficult and is not scalable.
  2. There is a better way to prevent a form from being sent.

Do it that way:

<form action="/" method="post" id="meu_form">
    Usuario
    <input type="text" id="usuario" name="usuario"/>
    Senha
    <input type="text" id="senha" name="senha"/>
    <button type="submit">Entrar</button>
</form>

Inside the tag <head> of your HTML, put:

<script type="text/javascript">
window.onload = function() {
    e = e || window.event; // hack p/ IE
    document.getElementById('meu_form').onsubmit = function(e){
        if (document.getElementById("usuario").value == ""
            || document.getElementById("senha").value == ""){
            alert("você tem que digitar os campos usuario e senha");
            e.preventDefault(); // dessa forma o formulário não será enviado   
        }  
    };
};
</script>

Browser other questions tagged javascript html

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