Checking empty spaces of a form in javascript

Question

I’m doing my studies trying to finalize a form in the validation part (if there are no blanks) in javascript and then it call the function file in php sending the data by email, However, I’m having trouble validating because I’m a little bit of a javascript layman. If anyone can give me a "I’m trying to learn, I wouldn’t like a full answer" hint, I graduate. I did the validation together in html after entering the form code.

---

Follows the code

<div class="box">
                    <form action="funcao.php" method="post" id="formulario_contato" onsubmit="validaForm(); return false;" class="form">
                        <div class="field half first"><input type="text" id="nome"  name="nome" placeholder="Nome" /></div>
                        <div class="field half"><input type="email" id="email" name="email" placeholder="Email" /></div>
                        <div class="field"><textarea name="mensagem" id="mensagem" placeholder="Mensagem"  rows="6"></textarea></div>
                        <ul class="actions">
                            <li>
                              <input  type="submit" value="Enviar Mensagem" />
                            </li>
                        </ul>
                    </form> 
                </div> 

Validation of javascript fields:

<script type="text/javascript">
    function validaForm()
    {
        erro = false;
        if($('#nome').val() == '')
        {
            alert('Você precisa preencher o campo Nome');erro = true;
        }
        if($('#email').val() == '' && !erro)
        {
            alert('Você precisa preencher o campo E-mail');erro = true;
        }
        if($('#mensagem').val() == '' && !erro)
        {
            alert('Você precisa preencher o campo Mensagem');erro = true;
        }   
    }
        //se nao tiver erros
        if(!erro)
        {
            $('#formulario_contato').submit();

        }

    }
</script>

Answer 1

You need to use the library in that code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

See if it works

   function validaForm()
    {
        erro = false;
        if($('#nome').val() == '')
        {
            alert('Você precisa preencher o campo Nome');erro = true;
        }
        if($('#email').val() == '' && !erro)
        {
            alert('Você precisa preencher o campo E-mail');erro = true;
        }
        if($('#mensagem').val() == '' && !erro)
        {
            alert('Você precisa preencher o campo Mensagem');erro = true;
        }   

        //se nao tiver erros
        if(!erro)
        {
            $('#formulario_contato').submit();

        }
        
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
                    <form action="funcao.php" method="post" id="formulario_contato" onsubmit="validaForm(); return false;" class="form">
                        <div class="field half first"><input type="text" id="nome"  name="nome" placeholder="Nome" /></div>
                        <div class="field half"><input type="email" id="email" name="email" placeholder="Email" /></div>
                        <div class="field"><textarea name="mensagem" id="mensagem" placeholder="Mensagem"  rows="6"></textarea></div>
                        <ul class="actions">
                            <li>
                              <input  type="submit" value="Enviar Mensagem" />
                            </li>
                        </ul>
                    </form> 
                </div>