PDA

View Full Version : Required Fields...need help with function.

whammond
07-29-2002, 06:21 PM
Ok, guys...I recieved a lil script on here like last week. It made supurb since to me, but I somehow can not get it to work within my page. The error I recieve is a "(function name) not defined" error. Heres my page:

<html>
<head>
<script src='../functions.js' language=JavaScript></script>
<link rel=stylesheet type=text/css href='template.css'>
<title>New Project</title>
<script language="text/javascript">
function checkrequired(which){ //open of function
var pass=true;
if(document.images){ //open first if
for(i=0;i<which.length;i++){ //open for loop
var tempobj=which.elements[i];
if(tempobj.name.substring(0,8)=="required"){ //open third if
if(((tempobj.type=="text"||tempobj.type=="textarea")&&tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&tempobj.selectedIndex==-1)) { //open fourth if
pass=false;
break;
} //close fourth if
} //close third if
} //close for loop
} //close first if
if(!pass){
alert("One or more of the required elements are not completed. Please complete them, then submit again!");
return false;
}
else
return true;
} //close of function
</script>


</head>
<body vspace=0>
<table width=630 align=left>
<tr height=20><td width="622">&nbsp;</td>
</tr><tr>
<td width="622">

<!-- code goes here -->
<form method="POST" action="projecthomepage.html" name="date" onSubmit="checkrequired(this)">

<table class=table align="center" cellspacing=0 width=553 border=0>
<tr>
<td class=outTableTitle colspan="2">
<h1><b>Add New Project</h1></b>
</td>
</tr><tr>
<td class=outTableHead>Sponsor First Name:</td>
<td><input type="text" name="requiredf_firstName"><font color="red">*</font></td>
</tr><tr> <!--LINE 50-->
<td class=outTableHead>Sponsor Last Name:</td>
<td><input type="text" name="requiredf_lastName"><font color="red">*</font></td>
</tr><tr>
<td class=outTableHead>Project Description:</td>
<td><input type="text" name="requiredf_projectDescription" size="45"><font color="red">*</font></td>
</tr><tr>
<td class=outTableHead>Project Request Date:</td>
<td><input type="text" name="f_date" size="10"><i>(MM/DD/YYYY)</i></td>
</tr><tr>
<td class=outTableHead>Project Start Date:</td>
<td><input type="text" name="f_projectStartDate" size="10"><i>(MM/DD/YYYY)</i></td>
</tr><tr>
<td class=outTableHead>Project Target Date:</td>
<td><input type="text" name="f_projectTargetDate" size="10"><i>(MM/DD/YYYY)</i></td>
</tr><tr>
<td class=outTableHead>Project Manager:</td>
<td><select name="projectManager">
<option>Suzanne White
<option>Valeri Battcher
<option>Walter Hammond
<option>Thomas Stanton
<option>Bridget Klare
</select></td>
</tr><tr>
<td class=outTableHead>Cost Center:</td>
<td><input type="text" name="f_costCenter"></td>
</tr><tr>
<td class=outTableHead>Priority Level:</td>
<td><input type="text" name="f_priorityLevel"> (High,Medium,Low)</td>
</tr><tr>
<td class=outTableHead>Status:</td>
<td><input type="text" name="f_status" value="New Project"></td>
</tr><tr>
<td class=outTableHead>Project id:</td>
<td><input type="text" name="requiredf_id"><font color="red">*</font></td>
</tr>
</table>

<br><br>
<center><input type="submit" name="newproject" value="Create Project"></center>
</form>



<!--code ends here -->


<td/>
<tr>
<td width="622">&nbsp;
</td>
</tr>
<tr height=300>
<td width="622">
</td></tr></table>

</body>
</html>

------------------------------------------------------------------------------------

Thank you for all responses in advance.
jkd
07-29-2002, 08:20 PM
Wrong forum, moving this to Javascript Programming.
adios
07-29-2002, 09:46 PM
Glad you like it - it's a pretty awful validator. Anyway - here's your mistake:

<script language="text/javascript">

Got the MIME type confused with the language attribute. Make that type="text/javascript">...

Here's a better validator (imho):


<html>
<head>
<link rel=stylesheet type=text/css href='template.css'>
<title>New Project</title>
<script type="text/javascript">

function checkform(f) {
var el, e = 0;
while (el = f.elements[e++]) {
if (el.required && el.type == 'text' && !el.value) {
alert('One or more of the required elements are not completed. Please complete them, then submit again!');
el.focus();
return false;
}
if (el.type == 'select-one' && !el.selectedIndex) {
alert('Please choose an option from the drop-down list, then submit again!');
el.focus();
return false;
}
}
return true;
}

</script>
</head>
<body vspace=0>
<table width=630 align=left>
<tr height=20><td width="622"> </td>
</tr><tr>
<td width="622">
<!-- code goes here -->
<form method="POST" action="projecthomepage.html" name="date"
onsubmit="this.f_firstName.required=true;this.f_lastName.required=true;
this.f_projectDescription.required=true;this.f_id.required=true;
return checkform(this)">
<table class=table align="center" cellspacing=0 width=553 border=0>
<tr>
<td class=outTableTitle colspan="2">
<h1><b>Add New Project</h1></b>
</td>
</tr><tr>
<td class=outTableHead>Sponsor First Name:</td>
<td><input type="text" name="f_firstName"><font color="red">*</font></td>
</tr><tr> <!--LINE 50-->
<td class=outTableHead>Sponsor Last Name:</td>
<td><input type="text" name="f_lastName"><font color="red">*</font></td>
</tr><tr>
<td class=outTableHead>Project Description:</td>
<td><input type="text" name="f_projectDescription" size="45"><font color="red">*</font></td>
</tr><tr>
<td class=outTableHead>Project Request Date:</td>
<td><input type="text" name="f_date" size="10"><i>(MM/DD/YYYY)</i></td>
</tr><tr>
<td class=outTableHead>Project Start Date:</td>
<td><input type="text" name="f_projectStartDate" size="10"><i>(MM/DD/YYYY)</i></td>
</tr><tr>
<td class=outTableHead>Project Target Date:</td>
<td><input type="text" name="f_projectTargetDate" size="10"><i>(MM/DD/YYYY)</i></td>
</tr><tr>
<td class=outTableHead>Project Manager:</td>
<td><select name="projectManager">
<option>choose</option>
<option>Suzanne White</option>
<option>Valeri Battcher</option>
<option>Walter Hammond</option>
<option>Thomas Stanton</option>
<option>Bridget Klare</option>
</select></td>
</tr><tr>
<td class=outTableHead>Cost Center:</td>
<td><input type="text" name="f_costCenter"></td>
</tr><tr>
<td class=outTableHead>Priority Level:</td>
<td><input type="text" name="f_priorityLevel"> (High,Medium,Low)</td>
</tr><tr>
<td class=outTableHead>Status:</td>
<td><input type="text" name="f_status" value="New Project"></td>
</tr><tr>
<td class=outTableHead>Project id:</td>
<td><input type="text" name="f_id"><font color="red">*</font></td>
</tr>
</table>
<br><br>
<center><input type="submit" name="newproject" value="Create Project"></center>
</form>
<!--code ends here -->
<td/>
<tr>
<td width="622">
</td>
</tr>
<tr height=300>
<td width="622">
</td></tr></table>
</body>
</html>


Adding 'required' to form element names - as a flag - is silly. Give your server a break & use JS. ;)
whammond
07-30-2002, 02:42 PM
Thanks a lot for that simple correction as well as better validator!! I bet I won't ever make that mistake again.

:thumbsup: