...

View Full Version : Looping through form textboxes of same name



Grant Palin
06-16-2004, 12:42 AM
I have a form with 10 textboxes, 2 columns fo 5. The first column is for a beginning age (textboxes are named "From"), and the second is for an ending age ("To").

I'm working on a script to validate entered values...But I still need to do one more thing: ensure that the value in the From box is less than or equal to the value in the To box. I tried just looping through the textboxes in the form object, but I get them from left to right, and top to bottom. And there are other unrelated form elements which get mixed in.

The form is as follows:


<form name="form2" method="get" action="" onsubmit="return ValidateUserAges(this);">
...
<input name="From" type="text" id="From" size="10" maxlength="3" />
<input name="To" type="text" id="To" size="10" maxlength="3" />
...
(four more pairs like above)


The JavaScript I have so far is:



function ValidateUserAges(form) {
var numValues = 0; //Counts how many valid values were entered
//For each field in the form, where the field is not empty
for (var counter = 0; counter < form.length; counter++) {
//If it is a text field
if (form[counter].type == "text" && form[counter].value != "") {
//Store the current value in a variable to make it easier to refer to
var curVal = form[counter].value;

//If the value of the current field is not a digit
if (!IsNumber(curVal)) {
//Display an alert
alert("Values must be numbers");
form[counter].select();
//Give that field the focus
form[counter].focus();
//Return false
return false;
} else { //The value is a number
//If the value is not in the proper range
if (curVal < 0 || curVal > 999 || (curVal > 90 && curVal < 999)) {
alert("Age must be between 0 and 90 or equal to 999");
form[counter].select();
form[counter].focus();
return false;
} else { //Value is a number in the proper range
//Increment the count of valid values
numValues++;
} //End of checking for number range
} //End of checking for whether a number or not
} //End of checking for whether on a text field
} //End of loop

//If no values were submitted, prevent form submission
if (numValues == 0) {
alert("You must enter at least one value");
return false;
}

//If reached this point, there are no errors, so return true
return true;
} //End of ValidateUserAges function

function IsNumber(value) {
for (var counter = 0; counter < value.length; counter++) {
if (!IsDigit(value.charAt(counter))) {
return false;
}
}

//It is a number, so return true
return true;
}

function IsDigit(value) {
var digits = "1234567890"

if (digits.indexOf(value) == -1) {
return false;
}

return true;
}

This works insofar as it checks that ages are numbers greater than zero. But I don't know how to loop through textfields of the same name. Suggestions?

glenngv
06-16-2004, 06:16 AM
function ValidateUserAges(form) {
var froms = form.From;
for (var i=0;i<froms.length;i++){
alert(froms[i].value);
}
...
}

neofibril
06-16-2004, 06:56 AM
//Store the current value in a variable to make it easier to refer to
var curVal = form[counter].value;

//If the value of the current field is not a digit
if (!IsNumber(curVal)) {
//Display an alert
alert("Values must be numbers");






//Store the current value in a variable to make it easier to refer to
var curVal = +form[counter].value;

//If the value of the current field is not a digit
if (isNaN(curVal)) {
//Display an alert
alert("Values must be numbers");

Grant Palin
06-16-2004, 05:39 PM
Thanks glennv, that code got me going.

What I did was set up a loop for the from fields and the to fields (one loop for each). Inside the loop, I call another function I created to validate a single age. If there's a problem, I return an error message; if not, I return an empty string. Back int he loop, if the message I retrieve is not empty, there's an error, so I display it, give the field the focus, and return false. If not, I continue.

And thanks to neofibril for telling me about the isNaN function...I wish I had know about that so I ddin't have to write that number-checking code the first time! And what's the plus (+) sign for?

Here's the code I have now:


function ValidateUserAges(form) {
var from = form.From;
var to = form.To;
var numValues = 0; //Counts how many valid values were entered
//For each field in the form, where the field is not empty
for (var i = 0; i < from.length; i++) {
//Store the current value in a variable to make it easier to refer to
var curFrom = from[i].value;

if (curFrom != "") { //If the value is not empty
var error = ValidateAge(curFrom)
if (error != "") { //If the error is not an empty string
alert("FROM: '" + error + "'");
from[i].select();
from[i].focus();
return false;
} else { //Valid value, so continue
numValues++;
} //End of checking for error
} //End of checking for empty values
} //End of from loop

for (var i = 0; i < to.length; i++) {
//Store the current value in a variable to make it easier to refer to
var curTo = to[i].value;

if (curTo != "") { //If the value is not empty
var error = ValidateAge(curTo)
if (error != "") { //If the error is not an empty string
alert("TO: '" + error + "'");
to[i].select();
to[i].focus();
return false;
} else { //Valid value, so continue
numValues++;
} //End of checking for error
} //End of checking for empty values
} //End of to loop

//If no values were submitted, prevent form submission
if (numValues == 0) {
alert("You must enter at least one value");
return false;
}

//If reached this point, there are no errors, so return true
return true;
} //End of ValidateUserAges function

function ValidateAge(val) {
var error = "";

if (val == "") {
//If the value is empty
error = ""
} else if (isNaN(val)) {
//If the value is not a number
error = "Values must be numbers";
} else if (val < 0 || val > 999 || (val > 90 && val < 999)) {
//If the value is not in the proper range
error = "Age must be between 0 and 90 or equal to 999";
} //End of checking for number range

//Return the error string (may be empty)
return error;
} //End of ValidateAge function

neofibril
06-16-2004, 05:55 PM
And what's the plus (+) sign for?
That's the unary plus operator that indicates a positive value, or a numeric cast on a non-numeric value--which is equivalent to Number(val); so when you apply that to input.value, any non-numeric characters contained in the string will result in NaN, while number-only-strings will be cast to numbers.

glenngv
06-17-2004, 03:12 AM
That's the unary plus operator that indicates a positive value, or a numeric cast on a non-numeric value--which is equivalent to Number(val); so when you apply that to input.value, any non-numeric characters contained in the string will result in NaN, while number-only-strings will be cast to numbers.
But empty string will return 0. So if the number field is required and it is left empty, it will pass the isNaN validation.

Grant Palin
06-17-2004, 03:33 AM
I see what you're saying about that. Unfortunately, 0 is an allowed value in my situation - only if the user explicitly enters it! So it won't be any good to make sure the value is greater than zero.

glenngv
06-17-2004, 05:55 AM
Unfortunately, 0 is an allowed value in my situation - only if the user explicitly enters it!
That's my point. If the user leaves the field empty, this line

var curVal = +form[counter].value;

will return 0 to curVal

so, if this is evaluated


if (isNaN(curVal)) {
//Display an alert
alert("Values must be numbers");
...

the alert will not display since 0 is a number.

neofibril
06-17-2004, 08:25 AM
I'm aware of that, glenngv.

Although it was good of you to mention it, that wouldn't have been a factor here, because above the +form[counter].value, he had:

if (form[counter].type == "text" && form[counter].value != "")

glenngv
06-17-2004, 09:09 AM
I didn't see that. But it's indeed worth mentioning. :)

Grant Palin
06-17-2004, 05:13 PM
I had thought to do that check for an empty field up by the top, since there's no point in going through all that trouble to validate an empty field...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum