使用 Jquery each() 循环遍历输入字段进行验证

Looping through input fields for validation using Jquery each()

提问by Alex Berg

I'm making a form and would like the code to execute only if the input values are numbers. I'm trying to avoid using some kind of validation plugin and was wondering if there is a way to loop through the input fields and check for the values.

我正在制作一个表格，并希望代码仅在输入值为数字时执行。我试图避免使用某种验证插件，并且想知道是否有办法遍历输入字段并检查值。

I've been trying the following but I think my logic is wrong:

我一直在尝试以下方法，但我认为我的逻辑是错误的：

(#monthlyincome is the form id)

（#monthlyincome 是表单 ID）

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

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

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

       }

   });

});

Any ideas?

有任何想法吗？

This is the whole updated code:

这是整个更新的代码：

$("#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 is a function for... formatting the numbers. :)

FormatNumberBy3 是一个函数，用于...格式化数字。:)

回答by Sondre

Well testing here this works just fine:

在这里测试这很好用：

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

on a form looking like this:

在一个看起来像这样的表格上：

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

Move the return false around as you see fit

根据您的需要移动 return false

Edit: link to code sdded to OPs form http://pastebin.com/UajaEc2e

编辑：链接到代码 sdded 到 OP 表单 http://pastebin.com/UajaEc2e

回答by RoToRa

The valueis a string. You need to try to convert it to a number first. In this case a simple unitary +will do the trick:

该value是一个字符串。您需要先尝试将其转换为数字。在这种情况下，一个简单的幺正+可以解决问题：

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

回答by socialCoder

Based on Sondre (Thank you! Sondre) example above, I developed a sample in Fiddle so that Folks can understand much better to implement

基于上面的 Sondre（谢谢！Sondre）示例，我在 Fiddle 中开发了一个示例，以便人们可以更好地理解实现

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