field validation help

**casa** · Jan 6, 2004, 08:09

I have 2 forms. In the first, the user enters the number of students requesting to take a class (1-50). It call the next form which has boxes for each students first and last name and then a bunch of info about the class. The html is built on the fly with PHP. The form would look something like this:

Code:

<form action="addclass.php" method="POST" name="input" id="input">
<input type="hidden" name="numStudents" value="3">
<p align="center">Add New Class Request</p>
<div class="center">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<th>1. First </th>
<td><input id="fnm1" type="text" name="first1" value="" /></td>
<th> Last: </th>
<td><input id="lnm1" type="text" name="last1" value="" /></td>
</tr>
<tr>
<th>2. First: </th>
<td><input id="fnm2" type="text" name="first2" value="" /></td>
<th> Last: </th>
<td><input id="lnm2" type="text" name="last2" value="" /></td>
</tr>
<tr>
<th>3. First: </th>
<td><input id="fnm3" type="text" name="first3" value="" /></td>
<th> Last: </th>
<td><input id="lnm3" type="text" name="last3" value="" /></td>
</tr>
</table>
</div>
<div class="center">
<table border="0" cellpadding="2" cellspacing="2">
<tr>
<th>Class Name: </th>
<td><input id="classnm" type="text" name="classnm" value="" /></td>
</tr>
<tr>
<th>Class Date: </th>
<td><INPUT TYPE="text" id="classdt" NAME="date1x" value="" /></td>
</tr>
</table>
</div>
<div align="center">
<input type="submit" name="submit" value="Submit" onClick="return ValAdd()" />
<input type="Reset" title="Reset" />
</div>
</form>

On the onClick="return ValAdd()" I need to validate whether the user entered all names (3 in this example). I'm trying to figure out how to loop through this. I will know in the javascript how many first/last combos I have because document.input.numStudent.value will equal 3 in this case. How do I loop through these three combos to make sure none is null?

Thanks...

**adios** · Jan 6, 2004, 12:37

Took a few liberties with your form...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function ValAdd(oForm)
{
	var first, last, i = 1, focus_me = null, msg = '';
	while (first = oForm.elements['first' + i]) //check for 'first[n]' field
	{
		last = oForm.elements['last' + i];  //it exists, so get 'last[n]' field
		if (/^\s*$/.test(first.value) || /^\s*$/.test(last.value)) //whitespace test
		{
			msg += '\nStudent #' + i;
			if (focus_me == null)
				focus_me = (/^\s*$/.test(first.value)) ? first : last; //save first empty field
		}
		++i;
	}
	if (msg != '')
	{
		msg = 'Please complete the following entries:\n' + msg + '\n\nThank you.';
		alert(msg);
		if (focus_me)
			focus_me.focus();
		return false;
	}
	return true;
}


</script>
</head>
<body>
<form action="addclass.php" method="POST" name="addclass" id="addclass" onsubmit="return ValAdd(this)">
<input type="hidden" name="numStudents" value="3">
<h3>Add New Class Request</h3>
<table cellpadding="5" cellspacing="0" border="0">
<tr>
<th>Student #</th><th>Last Name</th><th>First Name</th>
</tr><tr>
<td align="right"><strong>1</strong></td>
<td><input id="fnm1" type="text" name="first1" value="" /></td>
<td><input id="lnm1" type="text" name="last1" value="" /></td>
</tr><tr>
<td align="right"><strong>2</strong></td>
<td><input id="fnm2" type="text" name="first2" value="" /></td>
<td><input id="lnm2" type="text" name="last2" value="" /></td>
</tr><tr>
<td align="right"><strong>3</strong></td>
<td><input id="fnm3" type="text" name="first3" value="" /></td>
<td><input id="lnm3" type="text" name="last3" value="" /></td>
</tr><tr>
<td height="20" colspan="3"></td>
</tr><tr>
<td colspan="3" align="right"><strong>Class Name:</strong>
<input id="classnm" type="text" name="classnm" value="" size="32" /></td>
</tr><tr>
<td colspan="3" align="right"><strong>Class Date:</strong>
<input type="text" id="classdt" name="date1x" value="" size="32" /></td>
</tr><tr>
<td height="20" colspan="3"></td>
</tr><tr>
<td colspan="3" align="right">
<input type="submit" name="Submit" value="submit" />
<input type="reset" value="clear" onclick="return confirm('Clear all entries?')" />
</td>
</tr>
</table>
</form>
</body>
</html>

Shouldn't use DOM objects like 'input' as names...they're not specifically reserved, but collisions are always possible. And don't name a submit button 'submit' (Form.submit already in the house

).

**casa** · Jan 6, 2004, 12:49

You are great! That solved my problem. I've got to study this more so I can figure out what you did. Thank you so very much.

The SitePoint Forums have moved.

User Tag List

Thread: field validation help

Thread Tools

Display

field validation help

Bookmarks

Bookmarks

Posting Permissions