Tengo configurado en un formulario un elemento select con cierto numero de opciones, dependiendo de la opción seleccionada se traen unos valores via ajax de la base de datos y con la siguiente función el hace la comparación de los valores de esos datos.
var probar = function(event){
//event.preventdefault();
var a_cilindro = parseFloat($('#a_cilindro').val());
var a_bobina = parseFloat($('#a_bobina').val());
if(a_cilindro<a_bobina){
alert('Error: El valor del cilindro en menor al de la bobina');
$('#a_cilindro ').addClass("uk-form-danger");
$('#a_cilindro ').removeClass("uk-form-success");
} else {
$('#a_cilindro ').removeClass("uk-form-danger");
$('#a_cilindro ').addClass("uk-form-success");
};
var select = document.getElementById('my_select');
select.addEventListener('change', probar);
El problema es que esa comparación de los datos no me la hace en tiempo real sino después de que yo selecciono otra opción del select, es decir, si el resultado cumple la condición (a_cilindro<a_bobina)
me marca el input con la clase uk-form-success
cuando debería mostrarme el alert de error inmediatamente y marcarla con la clase uk-form-danger
, pero si yo selecciono una opción que no cumple la condición ahí si me muestra el alert de error basado en el dato de la selección previa y me marca el dato correcto con la clase uk-form-danger
cuando no deberia mostrarme error y marcar ese campo con la clase uk-form-success
.
Es algo confuso pero espero puedan entender, en estos casos, ¿como se podría manejar ese tipo de eventos?.
else
), la comparación debería realizarse cuando cambia el valor del elementomy_select
. ¿No sucede así? ¿Querrías que se produjera en otro momento? Quizás con un ejemplo más completo....select
? Si eso, entonces solo deberías llamar aprobar()
, por ejemplo, justo debajo deselect.addEventListener('change', probar);