2

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>

2

2 Respostas 2

2

Pelo teste que eu fiz está tudo funcionando. O único detalhe é que seu botão para envio de formulário não é do tipo submit. Esse botão também chama uma função chamada enviar, caso essa função esteja fazendo o submit via JavaScript, então de fato da maneira que você fez não irá funcionar, pois o evento onsubmit disparado pelo JS não é capturado. Se for esse o caso, chame a função de validação dentro da função enviar.

function validar(formDados) {
    if (formDados.primeiro.value == "") {
        alert("Digite um valor para o campo \"Nome\".");
        formDados.primeiro.focus();
        return false;
    }
}
<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="submit" name="" id="bt" value="enviar">
  </div>
</form>

2

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.
  3. 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>

4
  • eu troquei o button pelo submit e deu certo, a função enviar que esta sendo chamada é de outro arquivo js que esta recebendo essa função e retornando os dados, porem na hora de validar o nome, dps q eu clico em ok, mesmo eu nao tendo colocado o nome, ele parte para a tela de exibição, vc sabe como eu posso resolver isso ?
    – Pedro
    Commented 25/05/2019 às 1:54
  • eu comentei o resto do código, se vc tiver duvida da uma olhada
    – Pedro
    Commented 25/05/2019 às 1:59
  • @GiovanniManganotti, alterei a resposta, fiz outras alterações talvez te ajude. =D Commented 25/05/2019 às 7:26
  • 1
    obrigado cara, vc me ajudou muito, eu n gosto de ficar copiando as coisas dos outros, eu fiquei uns 20 minutos analisando para entender a logica e entendi, como sou novo em java script estou tendo um pouco de dificuldades, mas agradeço muito a atenção e a ajuda !!!!
    – Pedro
    Commented 25/05/2019 às 11:41

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .