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 eventoonsubmit
será disparado, isso porque o botão agora e do tipoinput[type='submit']
:
- O evento
onsubmit
irá chamar a funçãoenviar()
;- A função
enviar()
vai checar se o formulário foi bem preenchido (esta válido) para isso ela vai utilizar a sua funçãovalidar()
- Se não (não foi bem preenchido): para a execução retornandofalse
para o eventoonsubmit
e o formulário não será enviado. - Se sim (foi bem preenchido): continua a execução do seu script normalmente.
- Se tudo ocorrer bem seu script vai adicionar elementos na tela e vai retornar
false
para o eventoonsubmit
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>