Skip to main content
3 de 3
adicionou 75 caracteres ao conteúdo
Icaro Martins
  • 4,3mil
  • 14
  • 24
  • 35

O código esta funcionando, o problema e que seu botão esta como button e não submit e esta tentando chamar uma função enviar() que no código que você publicou não esta definida

Após atualização da pergunta

O seu input[type='button'] foi alterado para input[type='submit'] e o atributo onclick="enviar();" foi removido, deixando seu input como mostrado abaixo:

<input type="submit" name="" id="bt" value="enviar">

Alterei a função que esta sendo chamada no onsubmit do form para onsubmit="return enviar(this)".

Sua função validar() agora retorna true caso o formulário esteja válido e false caso ele seja inválido.

Sua função enviar() agora recebe o formulário como parâmetro e a primeira coisa que ela faz é executar a função validar() e verificar o resultado retornado para saber se deve continuar a execução.

No final da função enviar() você estava retornando true isso vai fazer o formulário ser enviado, como você não definiu os atributos method="" e o action="" ele vai enviar para a url atual por get, ou seja, a pagina será recarregada e sua url ficará +/- assim: http://minhapagina.com/?primeiro=abc&segundo=dfg..... Agora olhando sua função enviar() me parece que esse não é seu objetivo, pois você esta adicionando elementos na tela, então eu troquei seu return true no final da função por return false para o formulário não ser enviado.

Como nesse dentro da sua função enviar() você tem acesso aos dados do formulário, você pode utilizar uma outra forma de envio se assim desejar, como por exemplo enviar os dados por ajax.

Como as coisas estão executando agora?
Quando o usuário clicar no botão enviar o evento onsubmit será disparado, isso porque o botão agora e do tipo input[type='submit']:

  1. O evento onsubmit irá chamar a função enviar();
  2. A função enviar() vai checar se o formulário foi bem preenchido (esta válido) para isso ela vai utilizar a sua função validar() - Se não (não foi bem preenchido): para a execução retornando false para o evento onsubmit e o formulário não será enviado. - Se sim (foi bem preenchido): continua a execução do seu script normalmente.
  1. Se tudo ocorrer bem seu script vai adicionar elementos na tela e vai retornar false para o evento onsubmit para o formulário não ser enviado e a pagina não ser recarregada (como expliquei acima).

function validar( formDados ) {
    if (formDados.primeiro.value == "") {
        alert("Digite um valor para o campo \"Nome\".");
        formDados.primeiro.focus();
        return false;
/// ;          ^ indica que a validação falhou
    }
    
    
    return true;
/// ;      ^ indica que o formulario foi validado
}

/// ; Mudei a função para ela receber o elemento form
function enviar( formDados ) {

    /// ; O primeiro passo aqui dentro será executar a 
    /// ; função validar, pegar o seu retorno e verificar
    /// ; se esta função pode continuar a executar
    
    if( !validar( formDados ) )
    {
        /// ; Validação falhou, para a execução.
        return false;
    }

    /// ; Continua com a execução do seu codigo;
    
    var primeiro = formDados.primeiro.value;
    var segundo = formDados.segundo.value;
    var terceiro = formDados.terceiro.value;
    var quarto = formDados.quarto.value;
    var quinto = formDados.quinto.value;
    var sexto = formDados.sexto.value;
    var text_area = formDados.comentario.value;
    var valor = formDados.oitavo.value;

    //retornando o dia e o ano atual
    var dNow = new Date();
    var localdate = "Jundiai, " + dNow.getDate() + " de maio de " + dNow.getFullYear();

    //trocando o ponto pela virgula
    var troca = parseFloat(valor.replace(".", ","));

    //calculando o valor do acrescimo de 10%
    valor = (10 / 100 * troca + troca);

    //usando um 'modo' que o valor retornado fique no formato BR
    pt_br = Number(valor).toLocaleString('pt-BR', { style: "currency", currency: "BRL" });


    //chamando a tag 'estilo' do css
    var form = document.getElementById("estilo");

    //escondendo o formulario, pois ele apareceria 2x
    form.style.visibility = "hidden";

    //pegando id do body da pagina para manipula-lo
    var corpo = document.getElementById('body');

    //criando uma nova div no body para armazenar os dados retornados
    var div = document.createElement("div");

    //atribuindo um novo id=estilo para a div, assim deixando-a formatada
    div.setAttribute('id', 'estilo')

    //adicionando os dados retornados na pagina
    div.innerHTML =
        `${localdate} </br></br>
         CONTRATANTE (Tomador(a) de Serviços): Sr(a) ${primeiro} </br></br>
         Brasileiro(a), residente e domiciliado(a) na Rua: ${segundo} </br></br>
         N° ${terceiro} </br></br>
         Cidade de: ${quarto} </br></br>
         Estado: ${quinto} </br></br>
         CPF ou CNPJ: ${sexto} </br></br>
         Referente a Prestação de Serviços do tipo: ${text_area} </br></br>
         Valor: R$ ${pt_br}`

    //adicionando a div criada ao body da pagina
    body.appendChild(div);

    return false;
    // return true;
    /// ; Se retornar true o formulario vai ser enviado
    /// ; e a pagina sera redirecionada.
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="teste03.js"></script>
    <script src="validation.js"></script>
</head>
<body id="body">
    <form name="contrato" id="estilo"  onsubmit="return enviar(this)">
        <div>
            <div id="h1">
                Contrato de Serviços
            </div>

            <br>

            <div class="p">
                CONTRATANTE (Tomador(a) de Serviços): Sr(a).
                <input type="text" name="primeiro">
            </div>

            <br>

            <div class="p">
                Brasileiro(a), residente e domiciliado(a) na Rua
                <input type="text" name="segundo">
            </div>

            <br>

            <div class="p">
                N° <input type="number" name="terceiro">
            </div>

            <br>

            <div class="p">
                Cidade de: <input type="text" id="quarto">
            </div>

            <br>

            <div class="p">
                Estado: <input type="text" name="quinto"> <br>
            </div>

            <br>

            <div class="p">
                CPF ou CNPJ: <input type="text" name="sexto">
            </div>

            <br>

            <div class="p">

                <p>Referente a Prestação de Serviços do tipo: <br>
                    <textarea name="comentario" rows="10" cols="40"></textarea></p>

            </div>

            <div class="p">
                Valor: <input type="number" name="oitavo">
            </div>

            <br>

            <input type="submit" name="" id="bt" value="enviar">

        </div>

    </form>
</body>
</html>

Icaro Martins
  • 4,3mil
  • 14
  • 24
  • 35