<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required>I have two input where the first one receives the value of 25, wanted to know how to make the second not receive a value smaller than the first one.
If you do this dynamically, use JavaScript with the blur event, matching the value if it is less.
The min can be used for validation purposes if you are using a form to submit.
If this is not the case, you can use the event blur below:
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> If you submit the form, you can dynamically change min :
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> Use the [min][1] attribute.
<input type="number" name="total" value="25" required>
<input type="number" name="valor-em-dinheiro" class="form-control text-right" required min="25">
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 as an example. Change as needed. In order to test, I put a alert() and a preventDefault() if the user tries to submit the form with the lower value.
In this way ( onchange ), the trigger will be triggered even when the user presses enter after setting the value of the second field.