0

Quisiera saber como hago para evitar que se genere un alert por cada valor introducido en un campo input con el evento keyup, solo deseo que se ejecute el alert una vez si la validación falla, pero con este codigo si en el input oprimo x numero de teclas, ese x numero de veces me aparece el alert.

gracias.

$(function(){

    $('#nu_useful_width_max').keyup(function(){
        setTimeout(function(){
                var min = parseFloat(document.getElementById('nu_useful_width_min').value);
                var max = parseFloat(document.getElementById('nu_useful_width_max').value);
                if(min>=max)
                    alert('El ancho útil minimo no puede ser mayor al ancho útil maximo, por favor corregir');

        }, 1300);
        return false;

    });

});
1

3 respuestas 3

2

Por lo visto, tú lo que quieres es que la alerta no aparezca en seguida sino después de 1.3 segundos de que el usuario ha terminado de ingresar el valor máximo. En ese caso está bien el uso de setTimeout, pero tal como lo tienes esos timeOut se van a ir acumulando por cada tecla.

Lo que debes hacer es limpiar el timeout cuando una nueva tecla haya sido presionada, para que sólo se ejecute el más reciente, usando clearTimeout. Esto, porque setTimeout te devuelve un handler que luego puedes usar para cancelar el evento encolado:

(tomándome del html que puso @LuisDanielRoviraContreras)

$(function(){
    var timeout;
    $('#nu_useful_width_max').keyup(function(){
        clearTimeout(timeout);
        timeout = setTimeout(function(){
          var min = parseFloat(document.getElementById('nu_useful_width_min').value);
          var max = parseFloat(document.getElementById('nu_useful_width_max').value);
          if( min>max ) {
            alert('El ancho útil minimo no puede ser mayor al ancho útil maximo, por favor corregir');
          }
        }, 1300);
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <label for="">ancho útil minimo</label>
  <input id="nu_useful_width_min" type="number" name="" value="">
  <label for="">ancho útil maximo</label>
  <input id="nu_useful_width_max" type="number" name="" value="">
  </div>

1

Aqui esta el ejemplo espero te ayude

$('#nu_useful_width_max').keyup(function(){
    if($(this).val()>$("#nu_useful_width_min").val()){
      alert('El ancho útil minimo no puede ser mayor al ancho útil maximo, por favor corregir');
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="">ancho útil maximo</label>
  <input id="nu_useful_width_min" type="number" name="" value="">
  <label for="">ancho útil minimo</label>
  <input id="nu_useful_width_max" type="number" name="" value="">
  
  </div>

4
  • Tienes la condición al revés, pero funciona...
    – ffflabs
    Commented el 23 nov. 2017 a las 11:37
  • creo que asi si es bien la condición Commented el 23 nov. 2017 a las 12:36
  • No funciona si vuelves a borrar el valor..
    – ESCM
    Commented el 23 nov. 2017 a las 14:32
  • Podrias especificar mejor porque no funciona o lo que necesitas Commented el 23 nov. 2017 a las 14:35
0

window.addEventListener("DOMContentLoaded", applied);

function applied() {
  var input = {max: document.getElementById("max"),
               min: document.getElementById("min")};
  function _ini(focus) {
  var noFocus = focus === input.max ? input.min :
                input.max, needAlert = false;
  if(focus === input.max && focus.value < noFocus.value 
     && noFocus.value !== "") { 
     needAlert = true;
  }
  else if ( focus === input.min && focus.value > noFocus.value      && noFocus.value !== "") {
     needAlert = true;
  }
  if(needAlert) alert("Error en la asignación de los valores");
  }
  input.max.addEventListener("keyup", () => {
  _ini(input.max);
  });
  input.min.addEventListener("keyup", () => {
  _ini(input.min);
  });
}
Máximo: <input type="number" id="max">
Mínimo: <input type="number" id="min">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.