Validating multiple text boxes with same name.

[dominicall]

Hi All - hope someone can help with this...

Am building a search form for a database that allows users to search multiple geographic areas using free text in text boxes. I have 8 text boxes - each with the same name - 'area'.

The form validation takes place on submit thru a included script file. I've sorted out all my form validation for check boxes, radio buttons, etc.... but am now a bit stumped. How do I loop through the 8 text boxes to check that at least 1 has been used and 'return false' when validating the form????

I'm more of a VB/ASP/SQL programmer and have struggled with getting a working validation in javascript for this.

The code from the form is below:


<tr>
<td width="20%"><div class="header" align="left">Areas</div></td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
</tr>
<tr>
<td width="20%">&nbsp;</td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
<td width="40%"><input type="Text" name="area" maxlength="20" size="20"></td>
</tr>


Any help would be greatly appreciated.

Thanks

Dominic
:confused:

[RadarBob]

First this, and any solution will have to be done at the ONSUBMIT, when the user is saying "OK, I'm done.

Non-loop solution
The most direct way does not do what you want - make a loop.

Name each text box differently. Let's say area1 - area8 (which IMHO is very poor coding practice; you need more descriptive names.

Imagine the following code called by ONSUBMIT.

// Global variable
var validText = false;

function checkText (textbox) {
if (textbox.value != "") {
validText = true;
}
} // function checkText

function validateTexts (theForm) {
// At least one box must have something entered.
// Check will be "false" unless we find some text.

validText = false;

checkText (theForm.area1);
checkText (theForm.area2);
. . .
checkText (theForm.area8);

return validText;
} // function validateTexts()

. . .
<form ... onsubmit="return validateTexts(this);">


Loopy Solution

// "area" elements are textboxes

var validText = false;

for (var i = 0; i<document.MyForm.elements.length; i++) {
if (document.MyForm.elements[i].name = "area" (
if (document.MyForm.elements[i].value != "") {
validText = true;
}
}
}

return validText;

[dominicall]

Thanks RadarBob.... just one quick question.

Does the loop solution check that at least one text field is filled or all. I only want the error to return false if there have been no entries in the area field.

Even if there is only one entry, that's fine for the search....

Thanks once again

:)

[RadarBob]

Does the loop solution check that at least one text field is filled

Yes. Notice the flag starts out false. Then the code loops through ALL the text boxes. Only when a textbox is found "not blank" is the flag set to "true"

I do not force my way out of the loop when we find the first non-blank textbox. Adding the code to do that is, well, just more code. And more code one must test. Also, there are very few things to check anyway. If this looped say 10,000 times then it would be an issue.