Eu criei alguns campos na minha pagina e estou tentando fazer a validação desses dados usando js, porem por algum motivo ele não está funcionando, fiz apenas um teste no primeiro campo.
Segue o meu código no html e js, o name=contrato
está sendo usado para retornar os dados que foram inseridos nos campos do formulário, o id=estilo
esta sendo usado para formatar o formulário no css, mas esses dados acredito eu n fazem diferença nesse erro. Agora o onsubmit="return validar(this)"
está sendo usado para chamar a função que foi criado no meu javascript.
function validar(formDados) {
if (formDados.primeiro.value == "") {
alert("Digite um valor para o campo \"Nome\".");
formDados.primeiro.focus();
return false;
}
}
function enviar() {
var primeiro = document.contrato.primeiro.value;
var segundo = document.contrato.segundo.value;
var terceiro = document.contrato.terceiro.value;
var quarto = document.contrato.quarto.value;
var quinto = document.contrato.quinto.value;
var sexto = document.contrato.sexto.value;
var text_area = document.contrato.comentario.value;
var valor = document.contrato.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 true
}
<!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 validar(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="button" name="" id="bt" value="enviar" onclick="enviar();">
</div>
</form>
</body>
</html>