Validation of fields and data in table does not work

Question

Validation of fields and data in table does not work

Asked 6 years, 7 months ago

Viewed 76 times

-1

I want to validate the fields if they are properly filled and check if the sum of the fields is greater than 10 and show the data in the table but none of this is happening.

If I leave the fields empty and try to click register, instead of showing the message that the fields are empty, it shows this message:

HTML:

<form action="" method="post" class="formcss" name="form1"  >
    <h1>Dados do Aluno<br/>

    </h1> 
    <div>&nbsp;</div> 
    <div>
        <div class="rotulos">RGM :</div>
        <input id="rgm" type="text" name="rgm" placeholder="Digite seu RGM" class="entrada" />
    </div>
    <div>
    <div>
        <div class="rotulos">Nome :</div>
        <input id="nome" type="text" name="nome" placeholder="Nome completo" class="entrada" />
    </div>

    <div>
        <div class="rotulos">Nota parcial :</div>
        <input type="text" id="notaparcial" name="notaparcial" 
               placeholder="Digite aqui a nota parcial" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota exercícios :</div>
        <input type="text" id="notaexercicios" name="notaexercicios" 
               placeholder="Digite aqui a nota dos exercícios" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota projeto :</div>
        <input type="text" id="notaprojeto" name="notaprojeto" 
               placeholder="Digite aqui a nota no projeto" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota regimental :</div>
        <input type="text" id="notaregimental" name="notaregimental" 
               placeholder="Digite aqui a nota regimental" class="entrada" />
    </div>
    <div>
        <div class="rotulos">&nbsp;</div>
        <input type="button" id="btncalcular" value="Calcular" class="botao" />
        <input type="button" id="btnlistar" value="Mostrar" class="botao" />
    </div>
    <div>
        <div id="divresultado" class="rotuloretorno">Resultado...</div>
    </div>
    <div>&nbsp;</div><br>
</form>

CSS:

.formcss {
   width: 55%;
   background-color: #865027;
   padding: 20px 30px 20px 30px;
   font-size: 12px;
   font-family: verdana;
   color: #fff;
   text-shadow: 2px 2px 2px #000;
   border-radius: 25px;
   margin: 0 auto;
}
h1 {
   padding: 0px 0px 10px 0px;
   border-bottom: 3px solid #000;
   text-align: center;
}
.titulo {    
   font-size: 11px;
}
div {    
   margin: 0px 0px 20px;
}
.rotulos {
   float: left;
   width: 20%;
   text-align: right;
   padding-right: 10px;
   margin-top: 10px;
   font-weight: bold;
}
.rotuloretorno {
   float: left;
   width: 75%;
   font-size: 14px;
   font-family: verdana;
   text-align: left;
   padding-left: 200px;
   padding-right: 10px;
   margin-top: 10px;
   font-weight: bold;
}
.entrada {
   border: none;
   color: #525252;
   height: 30px;
   line-height: 15px;    
   padding: 5px 0px 5px 5px;
   width: 70%;
   border-radius: 5px;
   box-shadow: 2px 2px 2px #000;
   background-color: #f5deb3;
}
.botao {
   background-color: #2e1707;
   border: none;
   padding: 10px 25px 10px 25px;
   color: #fff;
   border-radius: 4px;
   text-shadow: 1px 1px 1px #FFE477;
   font-weight: bold;
   box-shadow: 2px 2px 2px #3D3D3D;
}
.botao:hover {
   color: #dbd9d9;
   background-color: #030201;
}

Javascript:

function validar() {
   var nome = $("#nome").val();
   var rgm = $("#rgm").val();
   var parcial = $("#notaparcial").val();
   var exercicios = $("#notaexercicios").val();
   var projeto = $("#notaprojeto").val();
   var regimental = $("#notaregimental").val();

   if (nome == "") {
      alert('Preencha o campo com seu nome');
      form1.nome.focus();
      return false;
   } else if (rgm == "") {
      alert('Preencha o campo com rgm');
      form1.rgm.focus();
      return false;

   } else if (parcial == "") {
      alert('Preencha o campo com a nota da parcial');
      form1.notaparcial.focus();
      return false;

   } else if (exercicios == "") {
      alert('Preencha o campo com a nota dos exe');
      form1.notaexercicios.focus();
      return false;

   } else if (projeto == "") {
      alert('Preencha o campo com a nota projeto');
      form1.notaprojeto.focus();
      return false;

   } else if (regimental == ""){
      alert('Preencha o campo com a nota regimental');
      form1.notaregimental.focus();
      return false;
   }
   return true;
}

function caculoMedia( /* n1, n2, n3, n4, etc */ ) {
   return [].reduce.call(arguments, function(sum, nr) {
      return sum + nr;
   }, 0) / (arguments.length);
}

function situacao(n1, n2, n3, n4) {
   var situacao = "";
   var media = caculoMedia(n1, n2, n3, n4);
   if (media >= 6) situacao += "Aprovado";
   else if (media < 6) situacao += "Exame";
   else situacao += "Reprovado";
   return situacao;
}

var nomes = [];
var indice = [];
var sit = [];
var media = [];

var i = 1;

window.onload = function() {
   var btn = document.getElementById("btncalcular");
   btn.onclick = function() {
      if (validar()) {
         var parcial = parseFloat($("#notaparcial").val());
         var exercicios = parseFloat($("#notaexercicios").val());
         var projeto =parseFloat($("#notaprojeto").val());
         var regimental = parseFloat($("#notaregimental").val());
         console.log(parcial, exercicios, projeto, regimental);
         if (parcial + exercicios + projeto + regimental <= 10) {
            nomes[i] = $("#nome").val();

            var resp = caculoMedia(parcial, exercicios, projeto, regimental);
            media[i] = resp;
            var sit = situacao(parcial, exercicios, projeto, regimental);
            sit[i] = situacao;
         } else {
            alert("A soma das notas não podem ultrapassar 10");
         }
      }
   }
   document.getElementById("btnlistar").onclick = function() {
      listarAlunos();
   }
}

function listarAlunos() {
   var conteudo = "<table border='2'>";
   conteudo += "<tr>";
   conteudo += "<th>";
   conteudo += "<div class='aluno'><p>Aluno</p></div>";
   conteudo += "</th>";
   conteudo += "<th>";
   conteudo += "<div class='media'><p>Media</p></div>";
   conteudo += "</th>";
   conteudo += "<th>";
   conteudo += "<div class='situacao'><p>Situacao</p></div>";
   conteudo += "</th>";
   conteudo += "</tr>";
   //pos contator
   for (var pos = 0; pos < nomes.length; pos++) {
      conteudo += "<tr>";

      conteudo += "<td>" + nomes[pos] + "</td>";
      conteudo += "<td>" + media[pos] + "</td>";
      conteudo += "<td>" + sit[pos] + "</td>";

      conteudo += "</tr>";
   }
   conteudo += "</table>";
   document.getElementById("txtrelatorio").innerHTML = conteudo;
}

makes use of Html5.. adds to inputs the required field! <input type="text" name="usrname" required> Otherwise, the answer to your question has already been answered, to call a function you have to put them ()

– sir_ask

2017/11/10 at 16:07

1 answer

Browser other questions tagged javascript jquery front-end

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

by Sam • **79,597** points · Answer 1 · 2017-11-10T16:02:08+00:00

Your Javascript has many problems that fixed, such as the function call validar in the if, the parentheses were missing: if(validar()), among other errors that prevented the code from working (I won’t explain them all otherwise this will get huge).

Follow the corrected code (if there are more problems, please point out that it can be fixed):

<script>
function validar() {
   var nome = $("#nome").val();
   var rgm = $("#rgm").val();
   var parcial = $("#notaparcial").val();
   var exercicios = $("#notaexercicios").val();
   var projeto = $("#notaprojeto").val();
   var regimental = $("#notaregimental").val();

   if (nome == "") {
      alert('Preencha o campo com seu nome');
      form1.nome.focus();
      return false;
   } else if (rgm == "") {
      alert('Preencha o campo com rgm');
      form1.rgm.focus();
      return false;

   } else if (parcial == "") {
      alert('Preencha o campo com a nota da parcial');
      form1.notaparcial.focus();
      return false;

   } else if (exercicios == "") {
      alert('Preencha o campo com a nota dos exe');
      form1.notaexercicios.focus();
      return false;

   } else if (projeto == "") {
      alert('Preencha o campo com a nota projeto');
      form1.notaprojeto.focus();
      return false;

   } else if (regimental == ""){
      alert('Preencha o campo com a nota regimental');
      form1.notaregimental.focus();
      return false;
   }
   return true;
}

function caculoMedia( n1, n2, n3, n4, etc ) {
   return [].reduce.call(arguments, function(sum, nr) {
      return sum + nr;
   }, 0) / (arguments.length);
}

function situacao(n1, n2, n3, n4) {
   var situacao = "";
   var media = caculoMedia(n1, n2, n3, n4);
   if (media >= 6) situacao += "Aprovado";
   else if (media < 6) situacao += "Exame";
   else situacao += "Reprovado";
   return situacao;
}

var nomes = [];
var indice = [];
var sit = [];
var media = [];

var i = 0;

window.onload = function() {
   var btn = $("#btncalcular");
   btn.click(function() {
      if (validar()) {
         var parcial = parseFloat($("#notaparcial").val());
         var exercicios = parseFloat($("#notaexercicios").val());
         var projeto =parseFloat($("#notaprojeto").val());
         var regimental = parseFloat($("#notaregimental").val());
         console.log(parcial, exercicios, projeto, regimental);
         if (parcial + exercicios + projeto + regimental <= 10) {
            nomes[i] = $("#nome").val();

            var resp = caculoMedia(parcial, exercicios, projeto, regimental);
            media[i] = resp;
            var situa = situacao(parcial, exercicios, projeto, regimental);
            sit[i] = situa;
         } else {
            alert("A soma das notas não podem ultrapassar 10");
         }
      }
   });
   $("#btnlistar").click(listarAlunos);
}

function listarAlunos() {
   var conteudo = "<table border='2'>";
   conteudo += "<tr>";
   conteudo += "<th>";
   conteudo += "<div class='aluno'><p>Aluno</p></div>";
   conteudo += "</th>";
   conteudo += "<th>";
   conteudo += "<div class='media'><p>Media</p></div>";
   conteudo += "</th>";
   conteudo += "<th>";
   conteudo += "<div class='situacao'><p>Situacao</p></div>";
   conteudo += "</th>";
   conteudo += "</tr>";
   //pos contator
   for (var pos = 0; pos < nomes.length; pos++) {
      conteudo += "<tr>";

      conteudo += "<td>" + nomes[pos] + "</td>";
      conteudo += "<td>" + media[pos] + "</td>";
      conteudo += "<td>" + sit[0] + "</td>";

      conteudo += "</tr>";
   }
   conteudo += "</table>";
   $("#divresultado").html(conteudo);
}
</script>

Another thing, on this line document.getElementById("txtrelatorio").innerHTML = conteudo;, I checked that in your HTML there is no element with the id="txtrelatorio". I imagine you mean div with id="divresultado". If so, just replace in the script.

Another suggestion: since you use jQuery, use it throughout the code. For example, document.getElementById("txtrelatorio").innerHTML = conteudo; could be $("#txtrelatorio").html(conteudo);.

function validar() {
   var nome = $("#nome").val();
   var rgm = $("#rgm").val();
   var parcial = $("#notaparcial").val();
   var exercicios = $("#notaexercicios").val();
   var projeto = $("#notaprojeto").val();
   var regimental = $("#notaregimental").val();

   if (nome == "") {
      alert('Preencha o campo com seu nome');
      form1.nome.focus();
      return false;
   } else if (rgm == "") {
      alert('Preencha o campo com rgm');
      form1.rgm.focus();
      return false;

   } else if (parcial == "") {
      alert('Preencha o campo com a nota da parcial');
      form1.notaparcial.focus();
      return false;

   } else if (exercicios == "") {
      alert('Preencha o campo com a nota dos exe');
      form1.notaexercicios.focus();
      return false;

   } else if (projeto == "") {
      alert('Preencha o campo com a nota projeto');
      form1.notaprojeto.focus();
      return false;

   } else if (regimental == ""){
      alert('Preencha o campo com a nota regimental');
      form1.notaregimental.focus();
      return false;
   }
   return true;
}

function caculoMedia( n1, n2, n3, n4, etc ) {
   return [].reduce.call(arguments, function(sum, nr) {
      return sum + nr;
   }, 0) / (arguments.length);
}

function situacao(n1, n2, n3, n4) {
   var situacao = "";
   var media = caculoMedia(n1, n2, n3, n4);
   if (media >= 6) situacao += "Aprovado";
   else if (media < 6) situacao += "Exame";
   else situacao += "Reprovado";
   return situacao;
}

var nomes = [];
var indice = [];
var sit = [];
var media = [];

var i = 0;

window.onload = function() {
   var btn = $("#btncalcular");
   btn.click(function() {
      if (validar()) {
         var parcial = parseFloat($("#notaparcial").val());
         var exercicios = parseFloat($("#notaexercicios").val());
         var projeto =parseFloat($("#notaprojeto").val());
         var regimental = parseFloat($("#notaregimental").val());
         console.log(parcial, exercicios, projeto, regimental);
         if (parcial + exercicios + projeto + regimental <= 10) {
            nomes[i] = $("#nome").val();

            var resp = caculoMedia(parcial, exercicios, projeto, regimental);
            media[i] = resp;
            var situa = situacao(parcial, exercicios, projeto, regimental);
            sit[i] = situa;
         } else {
            alert("A soma das notas não podem ultrapassar 10");
         }
      }
   });
   $("#btnlistar").click(listarAlunos);
}

function listarAlunos() {
   var conteudo = "<table border='2'>";
   conteudo += "<tr>";
   conteudo += "<th>";
   conteudo += "<div class='aluno'><p>Aluno</p></div>";
   conteudo += "</th>";
   conteudo += "<th>";
   conteudo += "<div class='media'><p>Media</p></div>";
   conteudo += "</th>";
   conteudo += "<th>";
   conteudo += "<div class='situacao'><p>Situacao</p></div>";
   conteudo += "</th>";
   conteudo += "</tr>";
   //pos contator
   for (var pos = 0; pos < nomes.length; pos++) {
      conteudo += "<tr>";

      conteudo += "<td>" + nomes[pos] + "</td>";
      conteudo += "<td>" + media[pos] + "</td>";
      conteudo += "<td>" + sit[0] + "</td>";

      conteudo += "</tr>";
   }
   conteudo += "</table>";
   $("#divresultado").html(conteudo);
}

.formcss {
   width: 55%;
   background-color: #865027;
   padding: 20px 30px 20px 30px;
   font-size: 12px;
   font-family: verdana;
   color: #fff;
   text-shadow: 2px 2px 2px #000;
   border-radius: 25px;
   margin: 0 auto;
}
h1 {
   padding: 0px 0px 10px 0px;
   border-bottom: 3px solid #000;
   text-align: center;
}
.titulo {    
   font-size: 11px;
}
div {    
   margin: 0px 0px 20px;
}
.rotulos {
   float: left;
   width: 20%;
   text-align: right;
   padding-right: 10px;
   margin-top: 10px;
   font-weight: bold;
}
.rotuloretorno {
   float: left;
   width: 75%;
   font-size: 14px;
   font-family: verdana;
   text-align: left;
   padding-left: 200px;
   padding-right: 10px;
   margin-top: 10px;
   font-weight: bold;
}
.entrada {
   border: none;
   color: #525252;
   height: 30px;
   line-height: 15px;    
   padding: 5px 0px 5px 5px;
   width: 70%;
   border-radius: 5px;
   box-shadow: 2px 2px 2px #000;
   background-color: #f5deb3;
}
.botao {
   background-color: #2e1707;
   border: none;
   padding: 10px 25px 10px 25px;
   color: #fff;
   border-radius: 4px;
   text-shadow: 1px 1px 1px #FFE477;
   font-weight: bold;
   box-shadow: 2px 2px 2px #3D3D3D;
}
.botao:hover {
   color: #dbd9d9;
   background-color: #030201;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" class="formcss" name="form1"  >
    <h1>Dados do Aluno<br/>

    </h1> 
    <div>&nbsp;</div> 
    <div>
        <div class="rotulos">RGM :</div>
        <input id="rgm" type="text" name="rgm" placeholder="Digite seu RGM" class="entrada" />
    </div>
    <div>
    <div>
        <div class="rotulos">Nome :</div>
        <input id="nome" type="text" name="nome" placeholder="Nome completo" class="entrada" />
    </div>

    <div>
        <div class="rotulos">Nota parcial :</div>
        <input type="text" id="notaparcial" name="notaparcial" 
               placeholder="Digite aqui a nota parcial" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota exercícios :</div>
        <input type="text" id="notaexercicios" name="notaexercicios" 
               placeholder="Digite aqui a nota dos exercícios" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota projeto :</div>
        <input type="text" id="notaprojeto" name="notaprojeto" 
               placeholder="Digite aqui a nota no projeto" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota regimental :</div>
        <input type="text" id="notaregimental" name="notaregimental" 
               placeholder="Digite aqui a nota regimental" class="entrada" />
    </div>
    <div>
        <div class="rotulos">&nbsp;</div>
        <input type="button" id="btncalcular" value="Calcular" class="botao" />
        <input type="button" id="btnlistar" value="Mostrar" class="botao" />
    </div>
    <div>
        <div id="divresultado" class="rotuloretorno">Resultado...</div>
    </div>
    <div>&nbsp;</div><br>
</form>