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)
$("#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. :)
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
Edit: link to code sdded to OPs form http://pastebin.com/UajaEc2e
The value is a string. You need to try to convert it to a number first. In this case a simple unitary + will do the trick:
if (!isNaN(+this.value)) {
// process stuff here
}
Based on Sondre (Thank you! Sondre) example above, I developed a sample in Fiddle so that Folks can understand much better to implement
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>