Validation of fields and data in table do not work

Question

Validation of fields and data in table do not work

Navigation

#1 by (1 votes)

-1

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

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

HTML:

<formaction="" 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;
}

javascript jquery front-end

asked by anonymous 10.11.2017 / 16:24

1 answer

Get variables from the first 10 pages in descending order [closed] Doubt SELECT Mysql

score 1 · Accepted Answer

Your JavaScript has many problems that I have corrected, such as calling the function validar in if , was missing the parentheses: if(validar()) , among other errors that prevented the code from working (I will not explain all otherwise this will get huge).

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

<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, in this line document.getElementById("txtrelatorio").innerHTML = conteudo; , I noticed that in your HTML there is no element with id="txtrelatorio" . I imagine you want to refer to div with id="divresultado" . If so, just replace it in the script.

Another tip: Since it uses 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><formaction="" 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>