...

View Full Version : Form Validation



simbarashe
04-27-2007, 05:43 PM
Hie could some1 please help me, I am trying to validate my form with javascript before iy gets passed on to php and my database, the code I have come up with is below but I cant get it to work wot could be the problem?

<link href="css/jobSheet.css" rel="stylesheet" type="text/css" />

<html>
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
-->
</style><head>
<link href="CalendarControl.css" rel="stylesheet" type="text/css"><script src="CalendarControl.js" language="javascript">

function validate() {
var msg = "You are required to complete the following fields:";
var status = true;
if(name==document.oldClients.firstname.value=="") {
msg += "\n - First name";
status = false;
}
if(status != true)
{
alert(msg);
return(0);
}
else
{
document.oldClients.submit();
}
}
</script>
</head>
<body>
<?php
require_once('dbFunction.php');
?>

<form name="oldClients" method="post" action="dbNewJobsheet.php" onSubmit="return validate()">
<?php
dbConnect();

$role = mysql_query("SELECT * FROM STATUS_DESC") or die(mysql_error());
$staff = mysql_query("SELECT * FROM STAFF")
?>

<table width="75%" cellpadding="5" cellspacing="0" class="borderTop" align="center">
<td colspan="2" bgcolor="#FFCC00" align="center"><strong>Old Client Jobsheet</strong></td>
<tr>

<td align="left" width="65%" valign="top">
<table align="left" width="100%" cellpadding="5" cellspacing="0">

<tr align="center" class="formHeader">
<td width="47%" bgcolor="#FFCC00"><strong>Client details</strong>
<td width="53%" bgcolor="#FFCC00"><strong>Job sheet details</strong> </td>
</tr>
<tr>
<td valign="top" align="center">

<table cellpadding="4" class="formText">
<tr><td>First name*<td><input name="firstName" type="text" class="input"/></td>
<tr><td>Last name*<td><input name="lastName" type="text" class="input" id="lastName"/></td>
<tr><td>Company name<td><input type="text" name="company_name" class="input"></td>
<tr><td>Site address<td><input name="Site_address" type="text" class="input" /></td>
<tr><td>Phone number<td><input type="text" name="phone_number" class="input"></td>
<tr><td>E-mail*<td><input type="text" name="email_address" class="input"></td>
</tr>
</table>
<td valign="top" align="center">

<table cellpadding="3">
<tr><td class="formText">Job Sheet Number<td class="formText">
<?php
echo JobIdGen();
?>
</td>
<tr><td class="formText">Date<td class="formText"><?php echo date("l, j F Y"); ?></td>
<tr><td class="formText">Assigned to*<td>
<select name="assignedStaff">
<option value="0">Choose one*</option>
<?php
while($staffRow = mysql_fetch_array($staff))
{
echo '<option value='.$staffRow['staffID'].'>'.$staffRow['username'].'</option>';
}
?>
</select>

<tr><td class="formText">Assigned Date*<td>
<input name="todays_date" onFocus="showCalendarControl(this);" type="text">

<tr><td class="formText">Assigned Time*<td>
<?php //<input name="assigned_time" type= "text" id= "assigned_time" class="textAreaBorder">
?>
<select name="postHour"><option value="1"> 1 </option><option selected="selected" value ="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> </select> : <select name="postMinute"><option value="00"> 00 </option> <option value="15"> 15 </option> <option value="30"> 30 </option> <option value="45"> 45 </option> </select> <select name="postAMPM"> <option value="0"> AM </option> <option selected="selected" value="1"> PM </option> </select>

</td>
<tr><td class="formText">Time Created<td class="formText">
<?php echo strftime("%R",time());
echo ' Hours';
?>

</td>
</tr>
<tr><td>Status*<td>
<select name="status">
<option value="0">Choose one</option>
<?php
while($row = mysql_fetch_array($role))
{
echo '<option value='.$row['status_desc_ID'].'>'.$row['status_type'].'</option>';
}
?>
</select>
</td>
</table>
<tr><td></td></tr>
<tr>
<td colspan="2" align="center" class="borderTop" bgcolor="#FFCC00"><span class="formHeader"> <strong>Request</strong></span></td></tr>
<tr>
<td colspan="2" align="center" class="borderTop" bgcolor="#FFCC00"><span class="formHeader">
<strong>Title* :<input name="title" type="text" class="input"/></strong></span></td></tr>
<tr>
<td colspan="2" align="center"><textarea name="textarea" cols="70" rows="10" class="textAreaBorder"></textarea></td></tr>
<tr>
<tr><td colspan="2" align="center" class="borderTop" bgcolor="#FFCC00">
<input type="button" name="clear" value="Clear" class="button" onClick="validate();" >
<input type="submit" name="submit" value="Submit" class="button" onClick="validate()">
</td></tr>
</table>
</td>
</tr>

</table>
</td>
</tr>
</table>

</form>
</body>
</html>
<script language="JavaScript">
<!--
var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;

//-->

Could some1 please tell me where I'm getting the java script wrong?

tahnk you.

mlseim
04-27-2007, 06:29 PM
I like this one the best:
http://www.massimocorner.com/validator/

View the demos and see how easy it is.

It's also easier to use an existing script instead of building one yourself.
No need to re-invent the wheel so to speak.

cyberlogi
04-27-2007, 08:00 PM
http://www.massimocorner.com/validator/

is a good validator, and many of the JavaScript Frameworks like YUI have some basic form validators, however each they aren't necessarily xhtml strict compliant. Often setting attributes that aren't in the DTD.

A better solution would be to create hidden elements on the form, that map to the visible field elements. For example you have the form:


<form action="">
<input type="hidden" value="myusernamevalidationcode" name="usernameValidator"/>
<input type="hidden" value="mypassowrdvalidationcode" name="passwordValidator"/>
<input type="text" name="username" />
<input type="text" name="password" />
</form>

Your validation code can be as simple or complicated as you need for the system. I use a generic form validator that searches a form for all visible fields, then finds there validators (if they exists). My validation code is designed in the following way:

part1 - which events are you listening for:
a comma delimited list of listeners

part2 - evaluation functions
comma delimited evaluation functions corresponding the the listener

part3 - display text
comma delimited message

between each part, I use double pipes ("||"). So a username evaluator might look like the following


"keydown, keypress||function(e){return this.value > 6;},function(e){return this.value < 16;}||Your username is too short,Your username is too long"

Hopefully, this will help you in designing your own validator or understanding existing ones.

glenngv
04-27-2007, 08:39 PM
function validate(frm) {
var msg = "You are required to complete the following fields:";
var status = true;
if (frm.firstName.value=="") {
msg += "\n - First name";
status = false;
}
if (frm.lastName.value=="") {
msg += "\n - Last name";
status = false;
}
//...and so on
if (!status)
{
alert(msg);
return false;
}
return true; //all inputs are valid at this point
}

<form name="oldClients" method="post" action="dbNewJobsheet.php" onSubmit="return validate(this)">
...
<input name="firstName" type="text" class="input"/>
<input name="lastName" type="text" class="input" id="lastName"/>
...
<input type="submit" name="submit" value="Submit" class="button" />



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum