2011-01-21 25 views
21

Estoy haciendo un formulario y me gustaría que el código se ejecute solo si los valores de entrada son números. Intento evitar el uso de algún tipo de complemento de validación y me preguntaba si hay una forma de recorrer los campos de entrada y verificar los valores.Looping a través de los campos de entrada para la validación usando Jquery cada()

he estado tratando el siguiente, pero creo que mi lógica es erróneo:

(#monthlyincome es el identificador de forma)

$("#submit").click(function() { 

    $("#monthlyincome input").each(function() { 

     if (!isNaN(this.value)) { 
     // process stuff here 

     } 

    }); 

}); 

¿Alguna idea?

Este es todo el código de actualización:

$("#submit").click(function() { 

    $("#monthlyincome input[type=text]").each(function() { 
     if (!isNaN(this.value)) { 
      // processing data  
      var age   = parseInt($("#age").val()); 
      var startingage = parseInt($("#startingage").val()); 

      if (startingage - age > 0) { 

       $("#field1").val(startingage - age); 
       $("#field3").val($("#field1").val()); 

       var inflationyrs = parseInt($("#field3").val()); 
       var inflationprc = $("#field4").val()/100; 
       var inflationfactor = Math.pow(1 + inflationprc, inflationyrs); 
       $("#field5").val(inflationfactor.toFixed(2)); 

       var estyearlyinc = $("#field6").val(); 
       var inflatedyearlyinc = inflationfactor * estyearlyinc; 
       $("#field7").val(FormatNumberBy3(inflatedyearlyinc.toFixed(0), ",", ".")); 

       var estincyears = $("#field2").val(); 
       var esttotalinc = estincyears * inflatedyearlyinc; 
       $("#field8").val(FormatNumberBy3(esttotalinc.toFixed(0), ",", ".")); 

       var investmentrate = $("#field9").val()/100; 
       var investmentfactor = Math.pow(1 + investmentrate, inflationyrs); 
       $("#field10").val(investmentfactor.toFixed(2)); 

       var currentsavings = $("#field11").val(); 
       var futuresavings = currentsavings * investmentfactor; 
       $("#field12").val(FormatNumberBy3(futuresavings.toFixed(0), ",", ".")); 

       //final calculations 
       var futurevalue = (1 * (Math.pow(1 + investmentrate, inflationyrs) - 1)/investmentrate); 
       var finalvalue = (1/futurevalue * (esttotalinc - futuresavings)); 

       $("#field13").val(FormatNumberBy3(finalvalue.toFixed(0), ",", ".")); 

      } 
      // end processing 
     } 
    }); 

}); 

FormatNumberBy3 es una función para dar formato a los números .... :)

+1

no ha comprobado esto, pero me vino a la mi cabeza ... Si está haciendo cada uno() en todos los elementos de entrada, probablemente incluirá también el botón de enviar, por lo que comprobará el valor de su envío y fallará si ese no es un número. No lo he probado, pero parece lógico;) Además, el código no está cerrado correctamente, pero podría ser simplemente un error de copiar y pegar. – Sondre

+1

@Sondre, yo también estaba pensando eso, pero él podría (y debería) estar usando '

+0

@Sondre: He intentado usar una clase (que solo corresponde a unos pocos campos de entrada) con el mismo resultado (negativo). El cierre fue de hecho un error de copiar y pegar. : P @ Box9: No estoy usando el botón en realidad pero aún no funcionará aunque use $ (". Classname"). Each(). –

Respuesta

34

pruebas de pozos aquí funciona bien:

$(function() { 
    $("#submit").click(function() { 
     $("#myForm input[type=text]").each(function() { 
      if(!isNaN(this.value)) { 
       alert(this.value + " is a valid number"); 
      } 
     }); 
     return false; 
    }); 
}); 

en un formulario con este aspecto:

<form method="post" action="" id="myForm"> 
    <input type="text" value="1234" /> 
    <input type="text" value="1234fd" /> 
    <input type="text" value="1234as" /> 
    <input type="text" value="1234gf" /> 
    <input type="submit" value="Send" id="submit" /> 
</form> 

Mover el devuelve falso como lo considere apropiado

Editar: enlace al código guardado en OPs formulario http://pastebin.com/UajaEc2e

+0

Me estoy golpeando la cabeza contra la pared aquí. Tu código funciona, por supuesto, y no puedo encontrar ninguna diferencia con la mía, pero mi código aún no funciona ... –

+0

@Alex, bueno, no mucho más puedo ayudarte sin ver más código tuyo ... Lo más probable un error estúpido del que te reirás una vez que lo encuentres;) – Sondre

+0

Jaja muy probablemente ... De hecho actualizaré con todo el bloque de código y si tienes algo de tiempo, no dudes en echarle un vistazo. –

1

El value es una cadena. Primero debe intentar convertirlo a un número. En este caso un simple unitaria + hará el truco:

if (!isNaN(+this.value)) { 
    // process stuff here 
} 
+0

'isNaN (" 25 ");' devuelve 'falso' correctamente. – jAndy

+0

Gracias por la respuesta. Sin embargo, todavía no hay suerte, ignora por completo la afirmación if ... –

0

Basado en Sondre (¡Gracias! Sondre) ejemplo anterior, he desarrollado una muestra de violín de modo que la gente puede entender mucho mejor implementar

Ejemplo: Click Here

$("#submit").on("click", function() { 
 
    var isValid = []; 
 
    var chkForInvalidAmount = []; 
 
    $('.partialProdAmt').each(function() { 
 
    if ($.trim($(this).val()) <= 0) { 
 
     isValid.push("false"); 
 
    } else { 
 
     isValid.push("true"); 
 
    } 
 
    if ($.isNumeric($(this).val()) === true) { 
 
     chkForInvalidAmount.push("true"); 
 
    } else { 
 
     chkForInvalidAmount.push("false"); 
 
    } 
 
    }); 
 
    if ($.inArray("true", isValid) > -1) { 
 
    if ($.inArray("false", chkForInvalidAmount) > -1) { 
 
     $(".msg").html("Please enter Correct format "); 
 
     return false; 
 
    } else { 
 
     $(".msg").html("All Looks good"); 
 
    } 
 
    } else { 
 
    $(".msg").html("Atlest One Amount is required in any field "); 
 
    return false; 
 
    } 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<form method="post" action="" id="myForm"> 
 
    <input type="text" class="partialProdAmt" value="0" /> 
 
    <input type="text" class="partialProdAmt" value="0" /> 
 
    <input type="text" class="partialProdAmt" value="0" /> 
 
    <input type="text" class="partialProdAmt" value="0" /> 
 
    <input type="button" value="Send" id="submit" /> 
 
</form> 
 
<div class="msg"></div>

Cuestiones relacionadas