0

Pessoal tenho a seguinte função:

function validar() {
   var campo1 = document.getElementById('subtotal').value;
   var campo2 = document.getElementById('totalpagar').value;

   if (campo1 != campo2) {
       alert('O Total da nota não confere com o Total a ser pago');
       return false; //Parar a execucao
   }
}

E o seguintes inputs:

<div align="center">
    <label for="subtotal">Total Nota R$: </label>
    <input type="text" name="subtotal" id="subtotal" size="8" />
</div>
<div align="center">
    <label for="totalpagar">Total Pgto R$: </label>
    <input type="text" name="totalpagar" id="totalpagar" size="8" />
</div>

Estes inputs vem de outras funções. Precisava comparar estes dois, emitir o alerta e não permitir que grave a informação quando clicar em enviar e não peder oque ja esta digitado. Tentei usar o onsubmit mas não deu certo.

1
  • O que quer dizer com "vem de outras funções"? Pois aparentemente o código funciona: olhe este JSFiddle com seu código. A única diferença é o botão que coloquei para que pudesse testar a função.
    – José
    Commented 26/03/2019 às 20:36

2 Respostas 2

0

Antes da validação, é necessário evitar que o formulário seja submetido usando a função Event.preventDefault(). Usando JavaScript puro, podemos fazer o tratamento pelo eventListenner.

window.onload = function(){

   var form = document.getElementById("my_form");
   var onsubmit = function(event){
        event.preventDefault();

       if(!validar()){
           //chame as funções para valores não válidos
       }else{
          form.submit();
       }
   }

   form.addEventListener("submit", onsubmit);
}

function validar() {
   var campo1 = document.getElementById('subtotal').value;
   var campo2 = document.getElementById('totalpagar').value;

   if (campo1 != campo2) {
       alert('O Total da nota não confere com o Total a ser pago');
       return false; //Parar a execucao
   }
   return true;
}
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<form id="my_form">
		<div align="center">
	    	<label for="subtotal">Total Nota R$: </label>
	    	<input type="text" name="subtotal" id="subtotal" size="8" />
		</div>
		<div align="center">
	    	<label for="totalpagar">Total Pgto R$: </label>
	    	<input type="text" name="totalpagar" id="totalpagar" size="8" />
		</div>
		<button type="submit">submit</button>
	</form>
	
</body>
<script type="text/javascript" src="test.js"></script>
</html>

4
  • Bom dia Lucas, obrigado por responder. Estou na duvida de onde colocar o código, não entendi onde devo colocar, ainda estou iniciando no JavaScript.
    – user132928
    Commented 27/03/2019 às 13:47
  • Bom dia. Vou editar o código com snnipet Commented 27/03/2019 às 14:01
  • Blz Lucas, obrigado. Até consegui fazer a verificação, mas se os valores são iguais ele não deixa cadastrar, parece que o submit não executa.
    – user132928
    Commented 27/03/2019 às 14:23
  • Obrigado Lucas, deu certinho. meu erro estava em não passar o id do form.
    – user132928
    Commented 27/03/2019 às 16:41
0

não sou muito bom com JS Puro, pq no meu cotidiano prefiso usar o JQuery, Segue um exemplo de como você poderia validar os campos antes de fazer o submit do formulário:

<script type="text/javascript">
    function comparar(id1,id2){
        valor1 = $("#"+id1).val();
        valor2 = $("#"+id2).val();
        if (valor1 == valor2) {
            return true;
        }else{
            return false;
        }
    }
</script>

Total Nota R$: Total Pgto R$:

<script type="text/javascript">
    $("#btn-enviar").click(function(e){
            e.preventDefault();
            if(comparar("subtotal", "totalpagar")){
                $("#formulario").submit();
            }
        });
</script>

Você deve fazer log-in para responder a esta pergunta.