How to check form values before sending it Javascript / jQuery

Question

I need to check two fields of a form before sending it.

I need to check that the 'stock_minimum' field is smaller than the 'stock_maximum' field. I have made numerous attempts and none worked well, incredible as it seems sometimes works and others do not (sometimes the conditions are simply ignored).

This is my code:

In the tag FORM joining with the BUTTON is like this (I will not put every form because it is great, and my interest is only in the 2 fields that I will insert)

function validaFormulario(){
	var estoque_minimo;
	var estoque_maximo;

	estoque_minimo = $('#estoque_minimo').val();
	estoque_maximo = $('#estoque_maximo').val();

	if(estoque_minimo >= estoque_maximo){
		alert('voce está fazendo isso errado...');
	}
	else{
		$('#formCadastroProdutos').submit();
	}                
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formCadastroProdutos" method="POST" action="cadastra_produto.php">
  <div class="form-group col-sm-4">
      <label for="estoque_minimo">Estoque minimo</label>
      <input type="number" class="form-control" id="estoque_minimo" name="estoque_minimo">
  </div>

  <div class="form-group col-sm-4">
      <label for="estoque_maximo">Estoque máximo</label>
      <input type="number" class="form-control" id="estoque_maximo" name="estoque_maximo">
  </div>

  <button onclick="validaFormulario()" id="btn_cadastra_produto" type="button" class="btn btn-primary">
      Salvar
      <span class="glyphicon glyphicon-floppy-disk"></span>
  </button>
</form>

I did it that way because I saw in a similar post around here... I am waiting for suggestions, I thank you!

Answer 1

Just state the variáveis within the event of click, thus the values of inputs will be captured whenever there is the action and using the function Math.max(), we found the largest number between the two inputs, if the largest is the input estoque_minimo he enters the if If it’s not, he goes into else.

$('#btn_cadastra_produto').click(function(){
var estoque_minimo = $('#estoque_minimo').val();
var estoque_maximo = $('#estoque_maximo').val();

var max = Math.max(estoque_minimo, estoque_maximo);
if(max == estoque_minimo){
	alert('voce está fazendo isso errado...');
}
else {
//$('#formCadastroProdutos').submit();
    alert('ok,enviado')
}                
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formCadastroProdutos" method="POST" action="cadastra_produto.php">

        <div class="form-group col-sm-4">
            <label for="estoque_minimo">Estoque minimo</label>
            <input type="text" class="form-control" id="estoque_minimo" name="estoque_minimo">
        </div>
                            
        <div class="form-group col-sm-4">
            <label for="estoque_maximo">Estoque máximo</label>
            <input type="text" class="form-control" id="estoque_maximo" name="estoque_maximo">
        </div>

        <button 
        id="btn_cadastra_produto" type="button" class="btn btn-primary">
            Salvar
            <span class="glyphicon glyphicon-floppy-disk"></span>
        </button>

</form>

Answer 2

Reginald,

you can add in your Form declaration the following code onsubmit="return validaFormulario()"

being as follows: <form id="formCadastroProdutos" method="POST" action="cadastra_produto.php" onsubmit="return validaFormulario()">

and modify your method to return Boolean if it is OK or not

function validaFormulario(){
var estoque_minimo;
var estoque_maximo;

estoque_minimo = $('#estoque_minimo').val();
estoque_maximo = $('#estoque_maximo').val();

if(estoque_minimo >= estoque_maximo){
    alert('voce está fazendo isso errado...');
    return false;
}
else{
    $('#formCadastroProdutos').submit();
    return true;
}                
}

This solution is more adopted than events onClick for being more secure, it is important to signal to the user where he has failed as well.