Menu
I am creating a form and having trouble validating the fields the way I want.
Here is what I want to do.
[LIST=1][*]
Validate entire form upon Submit button
Use <div></div> when error on the form occurs (no alert boxes)
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:
[LIST][*]
“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.