Validation of data in Javascript

Asked

Viewed 925 times

2

I created some fields on my page and I’m trying to validate this data using js, but for some reason it’s not working, I just did a test in the first field.

Follow my code in html and js, the name=contrato is being used to return the data that was entered in the form fields, the id=estilo is being used to format the form in css, but this data I believe n make a difference in this error. Now the onsubmit="return validar(this)" is being used to call the function that was created in my 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>

javascript html form

2 answers

2

By the test I did everything is working. The only detail is that your form submission button is not of the type submit. This button also calls a function called enviar, if this function is doing the submit via Javascript, so in fact the way you did it will not work, because the event onsubmit JS trigger is not captured. If this is the case, call the validation function inside the send function.

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

The code is working, the problem is that your button is like button and not submit and is trying to call a function enviar() that the code you published is not defined

After updating the question

Your input[type='button'] was changed to input[type='submit'] and the attribute onclick="enviar();" was removed, leaving his input as shown below:

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

I changed the function being called on onsubmit from form to onsubmit="return enviar(this)".

Its function validar() now returns true if the form is valid and false if he is invalid.

Its function enviar() now takes the form as parameter and the first thing it does is execute the function validar() and check the returned result to see if the execution should continue.

At the end of the function enviar() you were returning true this will make the form be submitted, as you have not defined the attributes method="" and the action="" he will send to the current url for get, that is to say, the page will be reloaded and its url will be +/- thus: http://minhapagina.com/?primeiro=abc&segundo=dfg..... Now looking at your function enviar() it seems to me that this is not your goal as you are adding elements on the screen, so I switched your return true at the end of the return false for the form not to be sent.

As in that within its function enviar() you have access to the form data, you can use another form of sending if you wish, for example send the data by ajax.

How things are running now?
When the user clicks on send button the event onsubmit will be fired, because the button is now input[type='submit']:

  1. The event onsubmit will call the function enviar();

  2. The function enviar() will check if the form has been filled out well (this valid) for this she will use her function validar()

    • If nay (was not well filled): for the return run false for the event onsubmit and the form will not be sent.
    • If yes (was well filled): continues the execution of your script normally.

  3. If all goes well your script will add elements on the screen and will return false for the event onsubmit for the form not to be sent and the page not to be reloaded (as I explained above). 

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>

  • I switched the button by Ubmit and it worked, the sending function that is being called is another js file that is receiving this function and returning the data, but at the time of validating the name, dps q I click on ok, even though I did not put the name, it leaves for the display screen, you know how I can fix this ?

  • I commented the rest of the code, if you doubt the one look

  • @Giovannimanganotti, I changed the answer, I made other changes may help you. = D

  • 1

    thanks man, you helped me a lot, I n like to keep copying other people’s stuff, I spent about 20 minutes analyzing to understand logic and understood, as I am new in java script I’m having a little trouble, but I really appreciate the attention and the help !!!!

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.