PDA

Click to See Complete Forum and Search --> : Validation of more than 9 fields

Twigathy
03-12-2003, 11:34 AM
Well, seems like i have a problem. I cannt validate all of my text fields because of the limit to the number of text fields that are present. Can anyone help out? Basically this is an imput form and all the fields need to be filled out before the data is sent off to an ASP page (Which adds these to a database).

Thanks for any help :)

Twigathy

CODE BURST FOLLOWS:

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function verify() {
var themessage = "You are required to complete the following fields:";
if (document.form.name.value=="") {
themessage = themessage + " - First Name";
}
if (document.form.comments.value=="") {
themessage = themessage + " - Last Name";
}
if (document.form.Depth.value=="") {
themessage = themessage + " - Depth";
}
if (document.form.Height.value=="") {
themessage = themessage + " - Height";
}
if (document.form.Width.value=="") {
themessage = themessage + " - Width";
}
if (document.form.Weight.value=="") {
themessage = themessage + " - Weight";
}
if (document.form.Compatibility.value=="") {
themessage = themessage + " - Compatibility";
}
if (document.form.Manufacterer.value=="") {
themessage = themessage + " - Manufacuror";
}
if (document.form.Cache.value=="") {
themessage = themessage + " - Cache";
}

//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
}
}
// End -->
</script>






<title>Guestbook Form</title>
</head>
<body bgcolor="white" text="black">
<!-- Begin form code -->
<form name="form" method="post" action="add_to_guestbook.asp" onclick="verify();">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">
<tr>
<td>Field name</td>
<td> Enter your data here</td>
<td>Comments about the field</td>
<td>Example data</td>
</tr>
<tr>
<td>Submitters Name:</td>
<td> <input type="text" name="name" maxlength="20" size="20"></td>
<td>Your Name</td>
<td>Joe Bloggs</td>
</tr>
<tr>
<td>Comments:</td>
<td> <input type="text" name="comments" maxlength="60" size="20"></td>
<td>Any comments you have about this particular data entry</td>
<td>Faulty drive, misreporting formatted size</td>
</tr>
<tr>
<td>Depth:</td>
<td> <input type="text" name="Depth" maxlength="3" size="20"></td>
<td>Depth of the drive in mm's</td>
<td>300</td>
</tr>
<tr>
<td>Height:</td>
<td> <input type="text" name="Height" maxlength="3" size="20"></td>
<td>Height of the drive in mm's</td>
<td>30</td>
</tr>
<tr>
<td>Width:</td>
<td> <input type="text" name="Width" maxlength="3" size="20"></td>
<td>Width of the drive in mm's</td>
<td>50</td>
</tr>
<tr>
<td>Weight:</td>
<td> <input type="text" name="Weight" maxlength="3" size="20"></td>
<td>Weight (Mass :P) of the drive in g's</td>
<td>250</td>
</tr>
<tr>
<td>Compatibility:</td>
<td> <input type="text" name="Compatibility" maxlength="8" size="20"></td>
<td>Comaptibility of the drive</td>
<td>All, PC, Mac</td>
</tr>
<tr>
<td>Manufacterer: </td>
<td> <input type="text" name="Manufacterer" maxlength="20" size="20"></td>
<td>Manufactoror</td>
<td>Western Digital</td>
</tr>
<tr>
<td>Cache:</td>
<td> <input type="text" name="Cache" maxlength="4" size="20"></td>
<td>Cache of the drive, KB's</td>
<td>1024</td>
</tr>
<tr>
<td>Transfer Rate: </td>
<td> <input type="text" name="Transfer Rate" maxlength="3" size="20"></td>
<td>Transfer rate measured in megabytes per second</td>
<td>100</td>
</tr>
<tr>
<td>Enclosure Type:</td>
<td> <input type="text" name="Enclosure Type" maxlength="3" size="20"></td>
<td>Enclosure type</td>
<td>ATX</td>
</tr>
<tr>
<td>Form Factor:</td>
<td> <input type="text" name="Form Factor" maxlength="20" size="20"></td>
<td>Almost always the same as Enclosure Type</td>
<td>ATX</td>
</tr>
<tr>
<td>Capacity:</td>
<td> <input type="text" name="Capacity" maxlength="3" size="20"></td>
<td>Formatted capacity. Assume NTFS file system. Measured in Gigabytes</td>
<td>80</td>
</tr>
<tr>
<td>Spindle Speed:</td>
<td> <input type="text" name="Spindle Speed" maxlength="5" size="20"></td>
<td>Speed of the drives' spindle in RPM</td>
<td>7200</td>
</tr>
<tr>
<td>Price: </td>
<td> <input type="text" name="Price" maxlength="7" size="20"></td>
<td>Price of the drive. Assume UK £</td>
<td>80</td>
</tr>
<tr>
<td>Average Seek Time: </td>
<td> <input type="text" name="Average Seek Time" maxlength="3" size="20"></td>
<td>Average amount of time it takes to seek to another file. Measured in milaseconds</td>
<td>15</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit"></td>
<td>&nbsp;</td>
</tr>
</table>
;</form>
<!-- End form code -->
</body>
</html>
AdamBrill
03-12-2003, 12:45 PM
hmm... I'm not exactly sure what you mean. I think this might be closer to what you want, though. Change this:if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}to this:if (themessage == "You are required to complete the following fields:") {
return true;
}Notice that there is an extra space at the end of your if command...

Then, delete out the onclick in the form and add this:

onsubmit="return verify();"

I'm not sure if that is what you wanted or not... Let me know if you wanted something else. ;)
Twigathy
03-12-2003, 12:54 PM
Hmmm

Not really what i was on about...

http://www.its-u2a-tee.com/twig/asp/guestbook_form.htm

Heres my test page. I tried validating more than 9 of the fields but i cannt seem to do it, i just get a load of errors. Is there a limit on the number of nestled If's in a function?
Nedals
03-12-2003, 01:20 PM
Try this...
function verify() {
var errmsg = "";
with (document.form) {
for (i=0; i<(length-1); i++) { if (!elements[i].value) errmsg += " - " + elements[i].name }
//alert if fields are empty and cancel form submit
}
if (!errmsg) { return true; }
else {
alert("You are required to complete the following fields:" + errmsg);
return false;
}
}

and change the <form... to this

<form name="form" method="post" action="add_to_guestbook.asp" onclick = "return verify();">
AdamBrill
03-12-2003, 01:24 PM
Just so you know, the reason you were having problems is because some of your input names had spaces. If you delete out the spaces it will work. And, you should use onsubmit rather than onclick...
Twigathy
03-12-2003, 01:28 PM
Yay! Thank you very much!

*Goes and changes all the field names...*

Cheers guys, im kid of new to this JavaScript stuff so please excuse my stupidity :)

<Edit>Ok new problem, when i press submit and the form isnt filled correctly the form still submits itself to add_to_guestbook.asp which i do not want it to do. How do i stop it from doing that? I.e if the fields arent filled then dont do the submit.

AMEDED CODE BURST:

<html>
<head>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
function verify() {
var themessage = "You are required to complete the following fields:";
if (document.form.name.value=="") {
themessage = themessage + " - First Name";
}
if (document.form.comments.value=="") {
themessage = themessage + " - Last Name";
}
if (document.form.Depth.value=="") {
themessage = themessage + " - Depth";
}
if (document.form.Height.value=="") {
themessage = themessage + " - Height";
}
if (document.form.Width.value=="") {
themessage = themessage + " - Width";
}
if (document.form.Weight.value=="") {
themessage = themessage + " - Weight";
}
if (document.form.Compatibility.value=="") {
themessage = themessage + " - Compatibility";
}
if (document.form.Manufacterer.value=="") {
themessage = themessage + " - Manufacuror";
}
if (document.form.Cache.value=="") {
themessage = themessage + " - Cache";
}
if (document.form.TransferRate.value=="") {
themessage = themessage + " - Transfer Rate";
}
if (document.form.EnclosureType.value=="") {
themessage = themessage + " - Enclosure Type";
}
if (document.form.FormFactor.value=="") {
themessage = themessage + " - Form Factor";
}
if (document.form.Capacity.value=="") {
themessage = themessage + " - Capacity";
}
if (document.form.SpindleSpeed.value=="") {
themessage = themessage + " - Spindle Speed";
}
if (document.form.Price.value=="") {
themessage = themessage + " - Price";
}
if (document.form.AverageSeekTime.value=="") {
themessage = themessage + " - Average Seek Time";
}

//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return true;
}
}
// End -->
</script>






<title>Guestbook Form</title>
</head>
<body bgcolor="white" text="black">
<!-- Begin form code -->
<form name="form" method="post" action="add_to_guestbook.asp" onsubmit="verify();">
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1">
<tr>
<td>Field name</td>
<td> Enter your data here</td>
<td>Comments about the field</td>
<td>Example data</td>
</tr>
<tr>
<td>Submitters Name:</td>
<td> <input type="text" name="name" maxlength="20" size="20"></td>
<td>Your Name</td>
<td>Joe Bloggs</td>
</tr>
<tr>
<td>Comments:</td>
<td> <input type="text" name="comments" maxlength="60" size="20"></td>
<td>Any comments you have about this particular data entry</td>
<td>Faulty drive, misreporting formatted size</td>
</tr>
<tr>
<td>Depth:</td>
<td> <input type="text" name="Depth" maxlength="3" size="20"></td>
<td>Depth of the drive in mm's</td>
<td>300</td>
</tr>
<tr>
<td>Height:</td>
<td> <input type="text" name="Height" maxlength="3" size="20"></td>
<td>Height of the drive in mm's</td>
<td>30</td>
</tr>
<tr>
<td>Width:</td>
<td> <input type="text" name="Width" maxlength="3" size="20"></td>
<td>Width of the drive in mm's</td>
<td>50</td>
</tr>
<tr>
<td>Weight:</td>
<td> <input type="text" name="Weight" maxlength="3" size="20"></td>
<td>Weight (Mass :P) of the drive in g's</td>
<td>250</td>
</tr>
<tr>
<td>Compatibility:</td>
<td> <input type="text" name="Compatibility" maxlength="8" size="20"></td>
<td>Comaptibility of the drive</td>
<td>All, PC, Mac</td>
</tr>
<tr>
<td>Manufacterer: </td>
<td> <input type="text" name="Manufacterer" maxlength="20" size="20"></td>
<td>Manufactoror</td>
<td>Western Digital</td>
</tr>
<tr>
<td>Cache:</td>
<td> <input type="text" name="Cache" maxlength="4" size="20"></td>
<td>Cache of the drive, KB's</td>
<td>1024</td>
</tr>
<tr>
<td>Transfer Rate: </td>
<td> <input type="text" name="TransferRate" maxlength="3" size="20"></td>
<td>Transfer rate measured in megabytes per second</td>
<td>100</td>
</tr>
<tr>
<td>Enclosure Type:</td>
<td> <input type="text" name="EnclosureType" maxlength="3" size="20"></td>
<td>Enclosure type</td>
<td>ATX</td>
</tr>
<tr>
<td>Form Factor:</td>
<td> <input type="text" name="FormFactor" maxlength="20" size="20"></td>
<td>Almost always the same as Enclosure Type</td>
<td>ATX</td>
</tr>
<tr>
<td>Capacity:</td>
<td> <input type="text" name="Capacity" maxlength="3" size="20"></td>
<td>Formatted capacity. Assume NTFS file system. Measured in Gigabytes</td>
<td>80</td>
</tr>
<tr>
<td>Spindle Speed:</td>
<td> <input type="text" name="SpindleSpeed" maxlength="5" size="20"></td>
<td>Speed of the drives' spindle in RPM</td>
<td>7200</td>
</tr>
<tr>
<td>Price: </td>
<td> <input type="text" name="Price" maxlength="7" size="20"></td>
<td>Price of the drive. Assume UK £</td>
<td>80</td>
</tr>
<tr>
<td>Average Seek Time: </td>
<td> <input type="text" name="AverageSeekTime" maxlength="3" size="20"></td>
<td>Average amount of time it takes to seek to another file. Measured in milaseconds</td>
<td>15</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit"></td>
<td>&nbsp;</td>
</tr>
</table>
;</form>
<!-- End form code -->
</body>
</html>
Nedals
03-12-2003, 01:43 PM
Oops! Thank you, adam.
Mini Tutorial
Whenever you find yourself writing repetitive code, look for an opportunity to use a loop! :)
Twigathy
03-12-2003, 01:45 PM
Alternatively i could make a noose from rope and hang myself over this trivial question :)
Nedals
03-12-2003, 01:53 PM
Twigathy
Ok new problem, when i press submit and the form isnt filled correctly the form still submits itself to add_to_guestbook.asp which i do not want it to do. How do i stop it from doing that? I.e if the fields arent filled then dont do the submit.


if (themessage == "You are required to complete the following fields: ") { return true }
else { alert(themessage); return false; }

.... onsubmit="return verify();">

or use the code I posted
AdamBrill
03-12-2003, 01:53 PM
Twigathy - Change onsubmit="verify();" to onsubmit="return verify();" And, change this section:

if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return true;
}

to:

if (themessage == "You are required to complete the following fields:") {
return true;
}
else {
alert(themessage);
return false;
}

Then it should work...

Originally posted by nedals
Mini Tutorial
Whenever you find yourself writing repetitive code, look for an opportunity to use a loop! :)That is a VERY good idea. Code can get extremely long without loops... ;)
AdamBrill
03-12-2003, 01:56 PM
nedals - In your code, you left the space in the if command. This:

if (themessage == "You are required to complete the following fields: ") { return true }

should be this:

if (themessage == "You are required to complete the following fields:") { return true }
Nedals
03-12-2003, 02:48 PM
Ahhh! BUT...
Twigathy's post had a space, so maybe it is wanted.:D

Update
Actually, the top message had no space and the lower messgae has a space, which will definately cause the if check to fail. I missed that earlier!! Is that what you were refering to?
AdamBrill
03-12-2003, 04:28 PM
Originally posted by nedals
Update
Actually, the top message had no space and the lower messgae has a space, which will definately cause the if check to fail. I missed that earlier!! Is that what you were refering to? Yup, that's what I meant. ;) It's pretty easy to miss, but it wouldn't work very well without it changed... :D