web-dev-qa-db-fra.com

Boucle dans les champs de saisie pour validation à l'aide de Jquery each ()

Je crée un formulaire et souhaite que le code ne s'exécute que si les valeurs d'entrée sont des nombres. J'essaie d'éviter d'utiliser un plug-in de validation et je me demandais s'il est possible de parcourir les champs d'entrée et de vérifier les valeurs. 

J'ai essayé ce qui suit mais je pense que ma logique est fausse:

(#monthlyincome est l'identifiant du formulaire)

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

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

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

       }

   });

});

Des idées?

C'est tout le code mis à jour:

$("#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 est une fonction permettant de ... formater les nombres. :)

jqueryvalidationformsinputeach
22
Alex Berg

Bien tester ici cela fonctionne très bien:

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

sur un formulaire ressemblant à ceci:

<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>

Déplacez le faux retour comme bon vous semble

Edit: lien vers le code sdded sous les formulaires OP http://Pastebin.com/UajaEc2e

35
Sondre

value est une chaîne. Vous devez d'abord essayer de le convertir en nombre. Dans ce cas, un simple + unitaire fera l'affaire:

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

D'après l'exemple de Sondre (Merci! Sondre) ci-dessus, j'ai développé un exemple dans Fiddle afin que les gens puissent comprendre beaucoup mieux à 

Exemple: Cliquez ici

$("#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>

0
socialCoder