2

Resulta que estoy tratando de validar que un input no sea mayor a otro pero no funciona correctamente

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
        function enviar() {
            let totalAnopheles = $('#totalAnopheles').val()
            let totalZancudos = $('#totalZancudos').val()
            if (totalAnopheles > totalZancudos) {
                console.log("error")
            } else {
                console.log('correcto')
            }

        }

    </script>

<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalZancudos">Total Zancudos:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalZancudos" name="totalZancudos" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalAnopheles">Total Anopheles:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalAnopheles" name="totalAnopheles" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<button onclick="enviar()">click</button>

la idea es que wl segundo input (Anopheles) no puede ser mayor a Zancudos

2 respuestas 2

2

Un pequeño detalle: al obtener con .val() los valores de cada campo, estás obteniendo cada valor como string (pese a que utilizás <input type="number">). Dos formas de convertir el valor que obtuviste a Number son:

  • Anteponer + (como lo dejo en el código),
  • convertirlo con parseInt()

quedando como resultado final:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
        function enviar() {
            //ambos valores convertidos a Number:
            let totalAnopheles = +$('#totalAnopheles').val();
            let totalZancudos = +$('#totalZancudos').val();
            if (totalAnopheles > totalZancudos) {
                console.log("error")
            } else {
                console.log('correcto')
            }
        }
    </script>

<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalZancudos">Total Zancudos:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalZancudos" name="totalZancudos" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalAnopheles">Total Anopheles:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalAnopheles" name="totalAnopheles" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<button onclick="enviar()">click</button>

1

No estás capturando los valores de los input. Puedes usar val() para ello, ya que estás usando jQuery.

Por otra parte, si usas let el dato se quedará siempre con el primer valor que tenía el input cuando llamaste a la función. Convendría usar var, porque así el dato se evaluará con el valor que tenga en ese momento.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="application/javascript">
        function enviar() {
            var totalAnopheles = $('#totalAnopheles').val();
            var totalZancudos = $('#totalZancudos').val();
            if (totalAnopheles > totalZancudos) {
                console.log("error")
            } else {
                console.log('correcto')
            }

        }

    </script>

<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalZancudos">Total Zancudos:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalZancudos" name="totalZancudos" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<div class="col-md-4">
    <div class="form-group has-feedback">
        <label for="totalAnopheles">Total Anopheles:</label>
        <input type="number" class="form-control allownumericwithoutdecimal" id="totalAnopheles" name="totalAnopheles" required="required">
        <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    </div>
</div>
<button onclick="enviar()">click</button>

4
  • ok pequeño detalle que olvidé, pero siempre me da error, si por ejemplo ingreso totalZancudos = 1, totalAnopheles = 10 dara error, pero siluego cambio totalZancudos =121 ,totalAnopheles=22 siempre cae en error Commented el 9 mar. 2020 a las 20:00
  • @IgmerRodriguez revisa la edición, debes cambiar let por var porque aquel te deja el valor fijo (el de la primera vez que se invocó la función). Sobre la diferencia de modificadores, esto puede ayudar a entenderlo mejor.
    – A. Cedano
    Commented el 9 mar. 2020 a las 20:01
  • Gracias veo que eso resuelve Commented el 9 mar. 2020 a las 20:05
  • Creo que esta afirmación es incorrecta: Por otra parte, si usas let el dato se quedará siempre con el primer valor que tenía el input cuando llamaste a la función. Yo lo revisaría, porque no es exactamente eso lo que sucede. Commented el 6 feb. a las 14:04

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.