php form validation with javascript
- by Jon Hanson
hi guys i need help trying to figure out why the alert box doesnt show up when i run this. im also new at programming. html i due just fine.
im currently taking a php class, and the teacher thought it would be fun to have us create a form and validate it. my problem is i am trying to call the function which then would validate it. My problem is its not calling it, and i cant quite figure out why. please help?
jons viladating
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" href="decor.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jons viladating</title>
<script type="text/javascript">
<!-- <![CDATA[
function showjonsForm() {
var errors = "";
// check for any empty strings
if (document.forms[0].fname.value == "")
errors += "fname\n";
if (document.forms[0].lname.value == "")
errors += "lName\n";
if (document.forms[0].addrs1.value == "")
errors += "Address\n";
if (document.forms[0].city.value == "")
errors += "City\n";
if (document.forms[0].state.value == "")
errors += "State\n";
if (document.forms[0].zip.value == "")
errors += "Zip\n";
if (document.forms[0].phone.value == "")
errors += "Phone\n";
if (document.forms[0].email.value == "")
errors += "Email\n";
if (document.forms[0].pw2.value == "")
errors += "Confirm password\n";
if (document.forms[0].dob.value == "")
errors += "Date of birth\n";
if (document.forms[0].sex.value == "")
errors += "sex\n";
// don't need to check checkboxes
if (errors != "") { //something was wrong}))
alert ("Please fix these errors\n" + errors) ;
return false;
}
var stringx;
stringx = "fName:" + document.forms(0).fname.value;
stringx = "lName:" + document.forms(0).lname.value;
stringx += "\nAddress: " + document.forms(0).addrs1.value;
stringx += "\nCity: " + document.forms(0).city.value;
stringx += " \nState: " + document.forms(0).state.value;
stringx += " Zip: "+ document.forms(0).zip.value;
stringx += "\nPhone: " + document.forms(0).phone.value;
stringx += "\nE-mail:" + document.forms(0).email.value;
stringx += "\nConfirm password " + document.forms(0).pw2.value;
stringx += "\nDate of birth: " + document.forms(0).dob.value;
stringx += "\nSex: " + document.forms(0).sex.value;
alert(stringx);
return false //set to false to not submit
}
// ]]> -->
</script>
<h1>jons validations test</h1>
</head>
<body>
<div id="rightcolumn">
<img src="hula.gif" align="right"/>
</div>
<text align="left">
<form name="jon" action="formoutput.php" onsubmit="return showjonsForm()" Method="post">
<fieldset style="width:250px">
<label> first name</label> <input type="text" name="fname" size="15" maxlength="22" onBlur="checkRequired( this,'fname')"/><br />
<label>last name</label> <input type="text" name="lname" size="10" maxlength="22"> <br />
</fieldset>
<fieldset style="width:250px">
<label>address</label> <input type="text" name="adrs1" size="10" maxlength="30"><br />
<span class="msg_container" id="adrs2"></span><br />
<label>city</label> <input type="text" name="city" size="10" maxlength="15"><br />
<span class="msg_container" id="city"></span><br />
<label>state</label> <input type="text" name="state" size="10" maxlength="2"><br />
<span class="msg_container" id="state"></span><br />
<label>zip</label> <input type="text" name="zip" size="10" maxlength="5"><br />
</fieldset>
<fieldset style="width:250px">
<label>phone</label> <input type="text" name="phone" size="10" maxlength="10"><br />
<div>please input phone number in this format 1234567892 thank you </div>
<label>email</label> <input type="text" name="email" size="10" maxlength="22"><br />
<div> password must have 1 number upper case and minimum of 6 charcters</div>
<label>password</label> <input type="text" name="pw2" size="10" maxlength="12"><br />
<label>select gender type</label> <select name="sex" size="1" <br />
<option>male</option>
<option>female</option>
<option>timelord</option>
</select>
<label>date of birth</label> <input type="text name="dob" size="8" maxlength="8"/>
<div> would you like to know know more</div>
<label> yes</label> <input type="checkbox" checked="checked" name="check" />
</fieldset>
<input type="submit"/></form>
</form>
<div id="footer">
<img src="laps2.jpg"> <img src="orange.jpg"><img src="ok.jpg">
</div>
</body>
</html>
