2 replies [Last post]
Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 2 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

I made this bit of javascript code for simple form validation before the form gets handled by php. It validates the username fine but past there it gives me an error. But i can't seem to find anything wrong. I thought you guys might be able to see something i can't.

<script type="text/javascript" language="JavaScript">
  <!--
  function checkData() {
  	if (document.form.username.value.length <= 0) {
		alert ("Enter a username.");
		document.form.username.value = "***Username";
		document.form.username.focus();
		var problem = true;
	}
	if (document.form.pass1.value.length < 6) {
		alert ("Enter a password at least 6 characters long");
		var problem = true;
	}
	if (document.form.pass1.value != document.form.pass2.value) {
		alert ("Your confirmed password does not match the entered password");
		var problem = true;
	}
	if (document.form.first_name.value.length <= 0) {
		alert ("Enter your first name.");
		document.form.first_name.value = "***First Name";
		document.form.first_name.focus();
		var problem = true;
	}
	if (document.form.last_name.value.length <= 0) {
		alert ("Enter your last name.");
		document.form.last_name.value = "***Last Name";
		document.form.last_name.focus();
		var problem = true;
	}
	if (document.form.email.value.length <= 0) {
		alert ("Enter your email address.");
		document.form.email.value = "***Email Address";
		document.form.email.focus();
		var problem = true;
	}
	if (document.form.address1.value.length <= 0) {
		alert ("You must at least enter your first address.");
		document.form.address1.value = "***Address";
		document.form.address1.focus();
		var problem = true;
	}
	if (document.form.suburb.value.length <= 0) {
		alert ("Enter a suburb.");
		document.form.suburb.value = "***Suburb";
		document.form.suburb.focus();
		var problem = true;
	}
	if (document.form.state.value.length <= 0) {
		alert ("Enter a state.");
		document.form.state.value = "***";
		document.form.state.focus();
		var problem = true;
	}
	if (document.form.country.value == 0) {
		alert ("Select a country");
		document.form.country.focus();
		var problem = true;
	}
	if (document.form.postal_code.value.length <= 0) {
		alert ("Enter a postal code.");
		document.form.postal_code.value = "***";
		document.form.postal_code.focus();
		var problem = true;
	}
	if (document.form.number.value.length <= 0) {
		alert ("Enter a phone number");
		document.form.number.value = "***";
		document.form.number.focus();
		var problem = true;
	}
	if (problem == true) {
		return false;
	} else {
		return true;
	}
  }
//-->
</script>

Here's my form:

<form name="form" action="register.php" method="post" onsubmit="return checkData()">

<table border="0" width="90%" cellpadding="2" cellspacing="2">
  <tr>
    <td align="right">Username</td>
	<td align="left"><input type="text" name="username" size="25" maxlength="12" value="<?=$_POST[username] ?>" /></td>
	<td align="left">Maximum 12 characters. Stick to letters and numbers, no spaces, underscores, hyphens, etc.</td>
  </tr>
  <tr>
    <td align="right">Password</td>
	<td align="left"><input type="password" name="pass1" size="25" /></td>
	<td align="left">Minimum 6 characters, maximum 12, Stick to letters and numbers, no spaces, underscores, hyphens, etc.</td>
  </tr>
  <tr>
    <td align="right">Confirm Password</td>
	<td align="left"><input type="password" name="pass1" size="25" /></td>
	<td align="left">Should be the same as the password.</td>
  </tr>
  <tr>
    <td align="right">First Name</td>
	<td align="left"><input type="text" name="first_name" size="25" maxlength="20" value="<?=$_POST[first_name] ?>" /></td>
	<td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">Last Name</td>
	<td align="left"><input type="text" name="last_name" size="25" maxlength="20" value="<?=$_POST[last_name] ?>" /></td>
	<td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">Email Address</td>
	<td align="left"><input type="text" name="email" size="25" maxlength="60" value="<?=$_POST[email] ?>" /></td>
	<td align="left">Use your email address where you want to receive notices from.</td>
  </tr>
  <tr>
    <td align="right">Address 1</td>
	<td align="left"><input type="text" name="address1" size="40" value="<?=$_POST[address1] ?>" /></td>
	<td align="left">Your primary address</td>
  </tr>
  <tr>
    <td align="right">Address 2</td>
	<td align="left"><input type="text" name="address2" size="40" value="<?=$_POST[address2] ?>" /></td>
	<td align="left">Second adddress (leave blank if you have only one address)</td>
  </tr>
  <tr>
    <td align="right">Suburb</td>
	<td align="left"><input type="text" name="suburb" size="25" maxlength="40" value="<?=$_POST[suburb] ?>" /></td>
	<td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">State</td>
	<td align="left"><input type="text" name="state" size="5" maxlength="3" value="<?=$_POST[state] ?>" /></td>
	<td align="left">State in which your address resides eg. NSW</td>
  </tr>
  <tr>
    <td align="right">Country</td>
	<td align="left">
	  <select name="country">
	  <option value="0">-- Select a Country --</option>
	  <?php
	  	$file = "countries.txt";
		if ($countries = @file ($file)) {
			foreach ($countries as $key => $array) {
				echo "<option value=\"$array\">$array</option>";
			}
		}
	  ?>
      </select>
	</td>
	<td align="left">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">Postal Code</td>
	<td align="left"><input type="text" name="postal_code" size="5" maxlength="5" value="<?=$_POST[postal_code] ?>" /></td>
	<td align="left">Your zip or postcode.</td>
  </tr>
  <tr>
    <td align="right">Contact Number</td>
	<td align="left">(<input type="text" name="area_code" size="3" maxlength="3" value="<?=$_POST[area_code] ?>" />)-
	  <input type="text" name="number" size="8" maxlength="8" value="<?=$_POST[number] ?>" />
	</td>
	<td align="left">Phone number in which we can contact you on concerning your orders. If using a mobile number, insert the first
	two digits into the first field and the rest in the other.</td>
  </tr>
  <tr>
    <td align="center" colspan="3"><input type="reset" name="Reset" value="Reset Form" />&nbsp; &nbsp; &nbsp;<input type="submit" name="Submit" value="Register" /></td>
  </tr>
</table>

</form>

Thanks.

I am Dan, Dan I am.

Tags:
tommuir
Offline
Regular
Upper east side
Last seen: 14 years 18 weeks ago
Upper east side
Joined: 2004-04-05
Posts: 40
Points: 0

Javascript validation

Instead of using all those if statements and the variable problem, why not use "else if (){}" statements and end in an else?
The lengh of a string cannot be less than 0. and you could cut down on a little code if you just:

if (document.form.element.value) {
blah
}

Because an empty string evaluates to false. These aren't really problems but give it a go anyway...

i am not here

Fruitcake
Offline
Enthusiast
Perth, Australia
Last seen: 13 years 2 weeks ago
Perth, Australia
Timezone: GMT+8
Joined: 2004-04-12
Posts: 257
Points: 0

Javascript validation

Well it all works but the reason was because stupid me used the same name for two input boxes so then the javascript was giving me errors.

But thanks for the tips.

I am Dan, Dan I am.