0

<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>

Tenho dois input aonde o primeiro receber o valor de 25, queria saber como fazer o segundo não receber um valor menor que o primeiro.

3 Respostas 3

4

Se for fazer isso de forma dinâmica, utilize JavaScript com o evento blur, igualando o valor caso seja menor.

O min pode ser usado para efeito de validação se você está utilizando um formulário a ser submetido.

Se não for este o caso, pode utilizar o evento blur abaixo:

document.querySelector("[name=valor-em-dinheiro]").onblur = function(){

   // valor do primeiro input. Se for vazio vira 0
   var total = document.querySelector("[name=total]").value || 0;

   // valor do segundo input
   var dindin = this.value;

   // se o segundo for menor que o primeiro, iguala
   if(Number(dindin) < total) this.value = total;
}
<input type="number" name="total" value="25" required>
<br>
Digite um valor menor e tecle TAB:
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>

Se for submeter o formulário, pode alterar o min de forma dinâmica:

document.querySelector("[name=total]").oninput = function(){
   // altera o min do segundo input de acordo com o valor digitado
   document.querySelector("[name=valor-em-dinheiro]").min = this.value;
}

document.querySelector("[name=valor-em-dinheiro]").oninput = function(){

   // seleciona o primeiro input
   var total = document.querySelector("[name=total]");

   // altera o min de acordo com o valor de total
   this.min = total.value;

}
<form>
   <input type="number" name="total" value="25" required>
   <input type="number" name="valor-em-dinheiro" class="form-control text-right" required>
   <br>
   <button>Enviar</button>
</form>

10
  • mas e pra proibir o usuário de digitar um numero menor essa função de digitar o tab pra poder ativa a função não ficaria legal pra mim. 7/12/2018 às 1:17
  • Entendo. Vc vai submeter esse formulário?
    – Meu ovo
    7/12/2018 às 1:18
  • Sim, irei submeter 7/12/2018 às 1:22
  • O problema é o seguinte: se o cara quiser digitar "200", é maior que 25, só que ao digitar o número "2" inicial, é menor que 25. Por isso tem que ter algum evento final para saber que valor o cara digitou. Quando ele faz um blur, é porque ele já digitou o valor que queria e saiu no input.
    – Meu ovo
    7/12/2018 às 1:58
  • Ele não tem que teclar em TAB. O TAB foi só um exemplo para sair do campo.
    – Meu ovo
    7/12/2018 às 2:01
4

Use o atributo [min][1].

<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required min="25">

2
  • Mas o valor do primeiro e dinâmico 7/12/2018 às 0:45
  • Você pode alterar o valor mínimo com JS também, fazendo document.getElementById("elemento").min = "25";, por exemplo. 7/12/2018 às 0:53
1

document.querySelector('[name=valor-em-dinheiro]').onchange = function() {
    console.log('change disparado');
    if(this.value < document.querySelector('[name=total]').value) {
        alert('Valor em dinheiro deve ser maior ou igual ao total!');
        // ...
    }
}
// No Chrome (atualizado) não é acionado o blur caso o usuário pressione "enter" para submeter o formulário.
//document.querySelector('[name=valor-em-dinheiro]').onblur = function() {
//    console.log('blur disparado');
//}
document.querySelector('[id=formul]').onsubmit = function(ev) {
    if(document.querySelector('[name=valor-em-dinheiro]').value < document.querySelector('[name=total]').value) {
        ev.preventDefault();
        console.log('submit interrompido');
    } else {
        ev.preventDefault(); // LEMBRE-SE DE COMENTAR ESTA LINHA APÓS TESTAR.
        console.log('submit não interrompido');
    }
}
  <form action="/dev" method="get" id="formul">
      <input type="number" name="total" value="25" required>
      <input type="number" name="valor-em-dinheiro" class="form-control text-right" required>
      <input type="submit" value="Submit">
  </form>

Use como exemplo. Altere conforme sua necessidade. A fim de testar, coloquei um alert() e um preventDefault() caso o usuário tente submeter o formulário com o valor menor.

Dessa forma (onchange), o gatilho será acionado até mesmo quando o usuário pressionar enter após definir o valor do segundo campo.

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .