Hello, I'm creating a form where the person must provide two values, a lower limit and a higher one, if the lower limit is greater than the upper one I would like an error message to be generated! before the form is sent.
I have managed to make it "work", but when I enter even numbers in the first input, the validation gets lost and returns as if nothing was typed (last else).
var input2 = $('#limiteinf');
var input3 = $('#limitesup');
var saida2 = $('.help-block2');
input2.on('input', function() {
atualiza2();
});
input3.on('input', function() {
atualiza2();
});
function atualiza2() {
var inferior2 = $("#limiteinf").val();
var superior2 = $("#limitesup").val();
var inferior = parseFloat(inferior2);
var superior = parseFloat(superior2);
if (inferior & superior != '') {
if (inferior > superior) {
$(".help-block2").html("O limite inferior deve ser menor que o Superior!");
$('#validalimite').removeClass("has-success");
$('#validalimite').addClass('has-error');
}
// Se resposta for false, ou seja, não ocorreu nenhum erro
else {
// Exibe mensagem de sucesso
$(".help-block2").html("");
$('#validalimite').removeClass("has-error");
$('#validalimite').addClass('has-success');
// Coloca a mensagem no div de mensagens
}
} else {
$('#validalimite').removeClass("has-success");
$('#validalimite').removeClass("has-error");
$('#validalimite').addClass('has-error');
$(".help-block2").html("Informe os LIMITES!");
}
// saida.html('exibe resultado...');
//aqui você pode chamar a função ajax
}
}
<input id="limiteinf" placeholder="Limite inferior" pattern="[0-9]+$"></input>
<span>e</span>
<input id="limitesup" placeholder="Limite superior" pattern="[0-9]+$"></input>
<p class="help-block2"></p>
