web-dev-qa-db-ja.com

Jquery each（）を使用した検証のための入力フィールドのループ

フォームを作成していますが、入力値が数値の場合にのみコードを実行したいと思います。ある種の検証プラグインの使用を避けようとしていますが、入力フィールドをループして値をチェックする方法があるかどうか疑問に思っていました。

私は次のことを試してきましたが、私の論理は間違っていると思います：

（#monthlyincomeはフォームIDです）

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

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

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

       }

   });

});

何か案は？

これは更新されたコード全体です：

$("#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は、...数値をフォーマットするための関数です。 :)

jqueryvalidationformsinputeach
23
Alex Berg

ここでよくテストすると、これはうまく機能します：

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

次のようなフォームで：

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

あなたが適切だと思うように戻り偽を動かしてください

編集：OPフォームに追加されたコードへのリンク http://Pastebin.com/UajaEc2e

37
Sondre

valueは文字列です。最初に数値に変換する必要があります。この場合、単純な単一の+トリックを行います：

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

上記のSondre（Thank you！Sondre）の例に基づいて、Fiddle=

例： ここをクリック

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