I've been playing with this form validation method for a while and have
tried an array of things but haven't had any luck with a couple items.
1. The validateForm() function doesn't detect when the Min price is
greater than the maximum price.
2. The validateForm() function doesn't call isNumber() on the minBaths,
maxBaths, minBeds, or maxBeds.
3. Despite errors in input and the validateForm() function returning
false, the form is still submitted.
These are probably obvious fixes...I'm just not seeing them. thanks for
any help.
Here's the code:
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/main.css">
<script language="JavaScript">
<!--
function validateForm(thisForm){
alert("validateForm() called");
//alert("'" + thisForm.minBaths.value + "'");
//alert(isNumber(thisForm.minBaths.value));
if (thisForm.minPrice.value == "") {
alert("You must enter a starting price.");
thisForm.minPrice.focus();
return false;
} else if(!isNumber(thisForm.minPrice.value)) {
alert("Please enter a number for the starting price.");
thisForm.minPrice.focus();
return false;
} else if (thisForm.maxPrice.value == "") {
alert("You must enter a maximum price.");
thisForm.maxPrice.focus();
return false;
} else if(!isNumber(thisForm.maxPrice.value)) {
alert("Please enter a number for the maximum price.");
thisFormForm.maxPrice.focus();
return false;
} else if(thisForm.minPrice.valueOf() >
thisForm.maxPrice.valueOf()) {
alert("The starting value is greater than the maximum price.");
thisForm.minPrice.focus();
return false;
} else if(!isNumber(thisForm.minBaths.value)) {
alert("Please enter a number for the minimum bathrooms.");
thisForm.minBaths.focus();
return false;
} else if(!isNumber(thisForm.maxBaths.value)) {
alert("Please enter a number of the maximum bathrooms.");
thisForm.maxBaths.focus();
} else if(!isNumber(thisForm.minBeds.value)) {
alert("Please enter a number for the minimum bedrooms.");
thisForm.minBeds.focus();
return false;
} else if(!isNumber(thisForm.maxBeds.value)) {
alert("Please enter a number for the maximum bedrooms.");
thisForm.maxBeds.focus();
return false;
} else {
return false;
}
}
function isNumber(entry) {
//alert("isNumber() Called");
validChar='0123456789'; // characters allowed
strlen=entry.length; // how long is test string
if (strlen < 1) {return false;} // no check!
// Now scan string for illegal characters
for (i=0; i < strlen; i++ ) {
if (validChar.indexOf(entry.charAt(i)) < 0) {
return false;
}
}
//alert("returning true");
return true;
}
//-->
</script>
</head>
<body>
<!-- HEADER START -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td class="bottomborder" colspan="3">
<div align="right" style="font-size:12px;">| <a
href="/">Home</a> |
<a href="/about.php">About</a> |
<a href="/contact.php">Contact</a> | </div>
</td>
</tr>
<!-- HEADER END -->
<tr>
<td valign="top" width="550">
<form name="searchForm" onSubmit="return validateForm(this)"
method="post">
<input type="hidden" name="advanced" value="true" />
<input type="hidden" name="valid" value="true" />
<table width="600" cellspacing="1" cellpadding="1" border="0"
class="padLeft">
<tr>
<td nowrap align="right">Street:</td>
<td colspan="7" nowrap> <input
type="text" name="StreetName" size="30" value=""/></td>
</tr>
<tr>
<td nowrap align="right">City:</td>
<td nowrap colspan="4"> <input
type="text" name="City" size="20"
value=""/> State:
<select name="State">
<option value="NC">NC</option>
<option value="SC">SC</option>
</select>
<span
style="padding-left:6px;padding-right:6px;font-size:12px;font-weight:bold;color:$999";>-OR-</span>
Zip Code: <input type="text" name="ZipCode" size="6"
maxlength="5" value=""/></td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<td colspan="5" style="padding-left:10px">
<table border="0" cellpadding="1" cellspacing="1">
<tr>
<td nowrap align="right">Min Price:</td>
<td nowrap> <input type="text"
name="minPrice" size="4" value="120000"/></td>
<td nowrap align="right">Max Price:</td>
<td nowrap> <input type="text"
name="maxPrice" size="4" value="125000"/></td>
</tr>
<tr>
<td nowrap align="right">Min Beds:</td>
<td nowrap> <input type="text"
name="minBeds" size="4" maxlength="2" /></td>
<td nowrap align="right">Max Beds:</td>
<td nowrap> <input type="text"
name="maxBeds" size="4" maxlength="2" /></td>
</tr>
<tr>
<td nowrap align="right">Min Baths:</td>
<td nowrap> <input type="text"
name="minBaths" size="4" maxlength="2" value="ax" /></td>
<td nowrap width="75" align="right">Max Baths:</td>
<td nowrap> <input type="text"
name="maxBaths" size="4" maxlength="2" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td colspan="3"><input type="submit" value="Submit"
name="submit" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
