My code does not abort the submission of the form as it should

Question

My code does not abort the submission of the form as it should

Navigation

#1 by (6 votes)
#2 by (3 votes)
#3 by (1 votes)

3

I made a form, and before sending I check if the person entered the user and the password. I put this in the submit event, but it does not 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

asked by anonymous 05.04.2014 / 00:25

3 answers

3

Just small adjustments.

See the changes:

Added IDs on the two form inputs
Changed getElementByName by getElementById , to return each element of our interest individually
Added return true; in JS, to make positive return explicit
Added return to onsubmit , as mentioned by @bfavareto, so that the function return actually returns to the form (to block the submission, 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>

Get up and running on JS Fiddle

05.04.2014 / 15:09

1

Just some good practice considerations:

Do not use on* attributes directly in HTML because it makes changes difficult and is not scalable.

There is a better way to prevent a form from being sent.

Do this:

<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>

Within the <head> tag 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>

06.04.2014 / 15:50

Doubts binary search Is saving the user ID on COOKIES safe?

score 6 · Accepted Answer

You have two major issues with your code:

To work as you want, you need another return within onsubmit :

onsubmit="return subimitar()"

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