javascript problem - Tech Support Forums

bhas · June 26th, 2008, 10:28 PM

i have created a form in html but can't seem to validate all the requires files and its not validating at all.
The things i need sto validate is name, address, suburb, postcode which must be numerical and 4 dits, email valiadtion with ampersand, card type and month and year. please help

here is the script for html and external java script

HTml File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Joe's Fruit and Vegetables</title>
<link rel="stylesheet" type="text/css" href="../css/joe_style.css" />
<script language="javascript1.5" src="../javascript/joes.js"></script>
</head>

<body>
<form id="orderform" name="orderform" method="post" onsubmit="return ValidateInputs()">
<p><strong>Your Details</strong></p>
<p>A * means you must fill in all the details</p>
<p>
<label for="Name">*Name:</label>
<input name="Name" type="text" id="Name" accesskey="N" tabindex="1" value="full name required" size="45" maxlength="25" />
</p>
<p>
<label>*Address:
<input name="address" type="text" id="address" accesskey="a" tabindex="2" value="Address Required" size="60" maxlength="60" />
</label>
</p>
<p>
<label>*Suburb:
<input name="suburb" type="text" id="suburb" accesskey="s" tabindex="3" value="Suburb Required" size="25" maxlength="25" />
</label>   
<label>*Postcode:
<input name="postcode" type="text" id="postcode" accesskey="p" tabindex="6" value=" Required" size="12" maxlength="10" />
</label>
</p>
<p>
<label>*Email Address:
<input name="emailaddress" type="text" id="emailaddress" accesskey="e" tabindex="7" value="Email Required" size="75" maxlength="60" />
</label>
</p>
<p>
<label>Order:<br />
<textarea name="order" cols="70" rows="6" id="order" accesskey="o" tabindex="8">Put your orders in here</textarea>
</label>
</p>
<p>Credit Card Details:</p>
<p>
<label>*Type:
<select name="type" size="1" id="type" accesskey="t" tabindex="9">
<option selected="selected">Amex</option>
<option>Visa</option>
<option>Diners</option>
<option>Mastercard</option>
</select>
</label>
 
<label>*Expiry Date: </label>
<label>
<select name="month" size="1" id="month" accesskey="m" tabindex="11">
<option selected="selected">01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</label>
<label>
<select name="year" size="1" id="year" accesskey="y" tabindex="12">
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
</select>
</label>
</p>
<p>
<label>
<input type="submit" name="submit" id="submit" value="Submit" accesskey="u" tabindex="13" />
</label>
<label>
<input type="reset" name="clear" id="clear" value="Clear" accesskey="c" tabindex="14" />
</label></p>
<tr>
<th width="80" scope="col"><label for="Submit"></label></th>
<th width="72" scope="col"><label for="label4"></label></th>
</tr>
</form>

</div>
</body>
</html>

External Java Script

function ValidateInputs() {
var sName = oredrform.full_name.value;
var sAddress = orderform.address.value;
var sSuburb = oredrform.suburb.value;
var sPostCode = orderform.PostCode.value;
var sEmail = oredrform.email.value;
var sCredit_card = orderform.credit_card.value;
var sMonth = orderform.month.value;
var sErr = "";
var sInstr = "";

//Check the fields
if (sName == "") {
sErr = "You must enter a full name\n";
}

if (sAddress == "") {
sErr = sErr + "You must enter an address\n";
}

if (sSuburb == "") {
sErr = sErr + "You must enter a Suburb\n";
}

if (sPostCode == "") {
sErr = sErr + "You must enter a Postal Code\n";
}

if (sEmail == "") {
sErr = sErr + "You must enter an email address\n";
}

if (sCredit_card == "please_choose") {
sErr = sErr + "You must select a credit card type\n";
}

if (sMonth == "00") {
sErr = sErr + "You must select a month\n";
}

if (sErr == "") {
return true;
}
else {
sInstr = "The following errors were found with your submission."
sInstr = sInstr + "\nPlease correct them and try again.\n\n"
sErr = sInstr + sErr

//inform the user of the problem
alert(sErr);
return false;
}

}

exally · June 28th, 2008, 07:32 AM

two things you might want to try... instead of using orderform.<element name> use document.getElementById(<id>).value
also, you could pass the form to function using "return ValidateInputs(this)".

ValidateInputs(form)
{
form.<element name>
}

also you are setting values in all of your input field and then calling value == "" so it would never be so?! maybe.,.. i haven't tested any of this.