How to check form values before submitting it JavaScript / jQuery

Navigation
0

I need to do a two-field check of a form before submitting it.

I need to check if the field 'minimum_store' is less than the 'maximum_store' field. I have already made countless attempts and none worked well, incredible as it seems sometimes works and sometimes not (sometimes the conditions are simply ignored).

Here's my code:

In the FORM form tag with BUTTON is like this (I will not put every form to be large, 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><formid="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 it in a similar post here ... I'm waiting for suggestions, thank you!

    
asked by anonymous 19.02.2018 / 15:35

2 answers

0

Only declare the variáveis within the click event, so the inputs values will be captured whenever the action is done and using the Math.max() function, we find the largest number between the inputs , if the greater of the input estoque_minimo it enters the if if it is not, it enters the 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><formid="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>
    
19.02.2018 / 15:51
0

Reginaldo,

You can add in the declaration of your Form 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 because it is more secure, it is important to signal to the user where it has gone wrong.

    
19.02.2018 / 15:59
The contents of the array are not being printed, but the reference to the object [duplicate] How to receive the username of the logged in user when sending a message through REST?