Validate equal fields

Asked

Viewed 138 times

0

Personal I have the following function:

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
   }
}

And the following 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>

These inputs come from other functions. I needed to compare these two, issue the alert and not allow you to record the information when you click send and not ask what is already typed. I tried to use the onsubmit but it didn’t work out.

javascript

  • What do you mean "comes from other functions"? Apparently the code works: look at this Jsfiddle with your code. The only difference is the button I placed so you could test the function.

2 answers

0


Before validation, it is necessary to prevent the form from being submitted using the function Event.preventDefault(). Using pure Javascript, we can do the treatment by the 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>

  • Good morning Lucas, thank you for answering. I’m in doubt where to put the code, I don’t understand where I should put, I’m still starting Javascript.

  • Good morning. I will edit the code with snnipet

  • Blz Lucas, thanks. &#Xa.

  • Thanks Lucas, gave it right. my mistake was in not passing the form id.

0

I’m not very good with pure JS, because in my daily life I prefer to use Jquery, Here’s an example of how you could validate the fields before making the form Ubmit:

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

Total Note R$: Total Pgto R$: 

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

Browser other questions tagged javascript

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