Script doesn’t work

Question

The goal is if the field is empty write in the "label" that the field cannot be empty.

The purpose of the form is to go to confirmaNovaParagem.php to send the data and then confirmaNovaParagem forwards the user to the add stops page.

What happens is that the script does not work and goes straight to Confirmanovastop.php.

I’m beginner in javascript sorry any error but obvious.

<script type="text/javascript" language="javascript">
    function valida_form (){
        if(document.getElementById("adicionanomeparagem").value == ""){
            var div = document.getElementById("adicionanomeparagem");
            div.innerText = "Não pode estar vazio!"        
        }
    }
</script>
<div id="content">       
    <div id="segundofundo">
        <div id="titulo">
            <center>Adicionar Paragem</center>
        </div>
        <form name="Adicionaparagem" action="confirmaNovaParagem.php" method="post">
            <div id="fundotitulo"><br><br>
                Nome da paragem:<br><br>
                <input type="text" name="adicionanomeparagem"><br><br>

                Latitude paragem:<br><br>
                <input type="text" name="adicionalatitudeparagem"><br><br>

                Longitude paragem:<br><br>
                <input type="text" name="adicionalongitudeparagem"><br><br>

                Estado paragem: <br><br>            
                <select name="estadoparagem">
                    <option value="1">Activa</option>
                    <option value="2">Inactiva</option>
                </select><br><br>

                <div id="posicaobotao">
                    <input class="botao" value="Adicionar"  onclick="valida_form ()" type="submit" >
                </div>
            </div>
       </div>
    </form>

Answer 1

You have to stop sending the form with event.preventDefault(), this prevents the button to act as expected. Then do the check and if valid form.submit();

Take a look at this example, after you click on enviar it waits 5 seconds and sends the form, thus interrupting what is expected.

var button = document.querySelector('button');
var form = document.querySelector('form');
button.addEventListener('click', function(e) {
    e.preventDefault();
    setTimeout(function() {
        form.submit();
    }, 5000);
});

jsFiddle: https://jsfiddle.net/ov57u1zp/

---

In your case the code would have to be:

<input class="botao" value="Adicionar"  onclick="valida_form(event)" type="submit" >

and in function:

function valida_form (e){
    e.preventDefault();
    // resto da lógica de validação
    // ...
    // e depois, se tudo estiver certo:
    document.querySelector('form[name="Adicionaparagem"]').submit();

Answer 2

I’ll list what I found in your file, which may be causing you problems.

1. Your html is not completely formed. There is a closure of div extra before closing the form.

2. Its function did not contain a return, so every time you clicked the button, the Submit action was executed.

3. Your onclick was calling the function, but was not treating the return, when you put, onclick="return valida_form()", it executes the function and if the return is false, Submit is not executed. If the return is true, Submit is executed.

4. Along those lines document.getElementById("adicionanomeparagem").value == "" you are trying to catch the element by the id, but your inputs have no id and yes name. Add the id property to the input you want.

5. Along those lines var div = document.getElementById("adicionanomeparagem"); you were trying to catch a "div" that has the same id as your input. What would not be correct, because id is unique, that is, only one element in the gift, can have that id.

Here’s a good one reference how to validate forms.

Below dry my code with just a few modifications, nothing sophisticated, of what I would do in your code.

<script type="text/javascript" language="javascript">
    function valida_form (){            
        if(document.getElementById("adicionanomeparagem").value == ""){
            var div = document.getElementById("validacaonomeparagem");
            div.innerText = "Não pode estar vazio!"
            return false;
        }
        return true;
    }
</script>
<div id="content">       
    <div id="segundofundo">
        <div id="titulo">
            <center>Adicionar Paragem</center>
        </div>
        <form name="Adicionaparagem" action="confirmaNovaParagem.php" method="post">
            <div id="fundotitulo"><br><br>
                Nome da paragem:<br><br>
                <input id="adicionanomeparagem" name="adicionanomeparagem" type="text"><br><br>
                <div id="validacaonomeparagem"></div>

                Latitude paragem:<br><br>
                <input type="text" name="adicionalatitudeparagem"><br><br>

                Longitude paragem:<br><br>
                <input type="text" name="adicionalongitudeparagem"><br><br>

                Estado paragem: <br><br>            
                <select name="estadoparagem">
                    <option value="1">Activa</option>
                    <option value="2">Inactiva</option>
                </select><br><br>

                <div id="posicaobotao">
                    <input class="botao" value="Adicionar"  onclick="return valida_form ()" type="submit" >
                </div>
            </div>
        </form>
    </div>
</div>