I am creating a form and having trouble validating the fields the way I want.

Here is what I want to do.
  1. Validate entire form upon Submit button
  2. Use <div></div> when error on the form occurs (no alert boxes)
  3. Certain fields will only be "alpha", while others will only be "numeric", while others may contain both


Here is my code.
Code:
<html>
<head><title>Test</title>

<script language="javascript" type="text/javascript">

function all_fields(master_form)
{
/*	var errors = new Array();
	var valid  = true;
	var f = new Array();

	f[0] = "first";
	f[1] = "last";

	if(!alpha_field(master_form.f_first))
	{
		errors[0] = "Please enter first name (letters only)";
		valid = false;
	}
	else
	{
		errors[0] = "";
	}

	if(!alpha_field(master_form.f_last))
	{
		errors[1] = "Please enter last name (letters only)";
		valid = false;
	}
	else
	{
		errors[1] = "";
	}

	if(valid == false)
	{
		for(var i = 0; i < f.length; i++)
		{
			document.getElementById(f[i]).innerHTML = errors[i];
			document.getElementById(f[i]).style.display = 'block';
		}
		return valid;
	}
	else
	{
		return valid;
	}
*/
	var note = "";
	var f = new Array();

	f[0] = "first";
	f[1] = "last";

	note += alpha_field(master_form.f_first);
	note += alpha_field(master_form.f_last);

	if(note != "")
	{
		for(var i = 0; i < f.length; i++)
		{
			document.getElementById(f[i]).innerHTML = note;
			document.getElementById(f[i]).style.display = 'block';
		}
		return false;
	}
	return true;
}

function alpha_field(v)
{
	var legalChars	= /^[a-zA-Z]+$/;		// Only letters allowed
	//var condition	= true;
	var note = "";

	v.value = v.value.toUpperCase();

	if(v.value == "" || v.value.length == 0)
	{
		v.style.background = '#FF0000';
		v.focus();
		//condition = false;
		note = "Required Info";
	}
	else if(!legalChars.test(v.value))
	{
		v.style.background = '#FF0000';
		v.focus();
		//condition = false;
		note = "Only Letters";
	}
	else
	{
		v.style.background = '#FFFFFF';
	}
	//return condition;
	return note;
}

function numb_field()
{
	var legalchars	= "0123456789";			// Only numbers allowed
	var zip_code	= master_form.f_zip;
	var condition	= true;

	if(zip_code.value == "" || zip_code.value.length == 0)
	{
		zip_code.style.background = '#FF0000';
		document.getElementById('zip').innerHTML = "Enter Zip Code";
		document.getElementById('zip').style.display = 'block';
		zip_code.focus();
		condition = false;
	}

	for(var i = 0; i < zip_code.value.length && condition == true; i++)
	{
		var chk = zip_code.value.charAt(i);
		if(legalchars.indexOf(chk) == -1)
		{
			zip_code.style.background = '#FF0000';
			document.getElementById('zip').innerHTML = "Numbers Only";
			document.getElementById('zip').style.display = 'block';
			zip_code.focus();
			condition = false;
		}
	}
	return condition;
}

function v_caps(v)
{
	v.value = v.value.toUpperCase();
}

</script>

<style type="text/css">

.s {color: #FF0000; display: none;}

input:focus
{
	border: 1px solid #FFE213;
}

</style>

<head>

<body>

<form action="" name="master_form" onsubmit="return all_fields(this);">
<table border=1>
<tr>
<td>First Name:</td>
<td><input id="f_first" name="f_first" type="text" onkeyup="return v_caps(this);"></td>
<td><div class="s" id="first" name="first"></div></td>
</tr>

<tr>
<td>Last Name:</td>
<td><input id="f_last" name="f_last" type="text"></td>
<td><div class="s" id="last" name="last"></div></td>
</tr>

<tr>
<td>Address:</td>
<td><input id="f_addy" name="f_addy" type="text"></td>
<td><div class="s" id="addy" name="addy"></div></td>
</tr>

<tr>
<td>City:</td>
<td><input id="f_city" name="f_city" type="text"></td>
<td><div class="s" id="city" name="city"></div></td>
</tr>

<tr>
<td>State:</td>
<td><input id="f_state" name="f_state" type="text"></td>
<td><div class="s" id="state" name="state"></div></td>
</tr>

<tr>
<td>Zip Code:</td>
<td><input id="f_zip" name="f_zip" type="text"></td>
<td><div class="s" id="zip" name="zip"></div></td>
</tr>

<tr>
<td colspan=3><input type="submit" value="Submit"></td>
</tr>
</table>
</form>

</body>
</html>
The commented part of the code (near the top) will do what I need, but it is tedious to have to do it for each field (my final form will have more fields than what I provided in this example; probably closer to 25+ fields).

Currently, I am trying to get it to work with just the "First" and "Last" name fields, so I know that the other fields do not work at this time. When I run this, I will get an error message twice for each field (First and Last in this case).

Example:
  • "First Name" and "Last Name" blank - displays "Required InfoRequired Info"
  • "First Name" with alpha characters and "Last Name" blank (or vice versa) - the field will turn "White" (as it should because it is valid), but will still display "Required Info"
  • "First Name" with numeric characters and "Last Name" blank (or vice versa) - displays "Only LettersRequired Info" for both fields; whereas, it should display "Only Letters" for "First Name" and "Required Info" for "Last Name"


I am open to any ideas or suggestions. Thanks in advance.