Forum Moderators: open

Message Too Old, No Replies

Javascript Validation help

         

gareth886

10:27 am on Sep 11, 2007 (gmt 0)

10+ Year Member



i wondering if someone can help me. I'm trying to get javascript form validation to function on a website that I'm working on but am not having much luck. When i submit the form the validation doesnt run. The form code is pasted below followed by the validation code:


<form action="https://*****.php" method="post" id="mainform" onsubmit="validate();">

<input name="subject" type="hidden" value="EirGrid Annual Customer Conference 2007- Online Booking" />
<input
name="realname" type="hidden" value="EirGrid Annual Customer Conference 2007- Online Booking" />
<input name="template"
type="hidden" id="template" value="emailtemplate18.htm" />
<input
name="html" type="hidden" id="html"
value="yes" />
<input name="Event_Title" type="hidden" id="Event_Title" value="EirGrid Annual Customer Conference 2007" />
<input name="Event_Date" type="hidden" id="Event_Date" value="3rd - 4th October 2007" />
<input name="Event_Venue" type="hidden" id="Event_Venue" value="Crown Plaza Hotel, Dublin" />
<input name="Pic" type="hidden" id="Pic" value="http://www.bmfconferences.com/img/#*$!.gif" />
<input name="Check" type="hidden" id="Check" value="1" />

<table width="100%" border="0" cellspacing="2" summary="Date Venue Info">
<tr>
<td colspan="3" valign="top"> </td>
</tr>

<tr>
<td height="30" colspan="3" valign="top"><table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="#F0EADA" style="border:1px solid #cccccc;" summary="User Input">
<tr valign="top">
<td width="18%" style="padding-top:6px;"><p class="topic">I wish to:</p></td>
<td>
<label>
<input type="checkbox" name="Request" id="AttendConf" value="Attend Main Conference" />
Attend the <strong>Main Conference</strong><br />
<input type="checkbox" name="Request2" id="AttendDinner" value="Attend Conference Dinner" />
Attend the <strong>Conference Dinner</strong><br />
<input type="checkbox" name="Request3" id="AttendWorkshop" value="Attend Post Conference Workshop" />
Attend the <strong>Post-Conference Workshop</strong></label> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="18%">&nbsp;</td>
<td align="left" class="lightblue">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><label for="Name">Name:</label></td>
<td width="54%" align="left" class="lightblue"><input name="Name" id="Name" type="text" size="38" /> </td>
<td width="28%"><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="Position">Job Title:</label></td>
<td align="left" valign="top" class="lightblue" ><input name="Position" type="text" id="Position" size="38" /> </td>
<td>&nbsp;</td>
</tr>
<tr>
<td><label for="Company">Organisation:</label></td>
<td align="left" valign="top" class="lightblue"><input name="Company" type="text" id="Company" size="38" /> </td>
<td><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="Telephone">Telephone:</label></td>
<td align="left" valign="top" class="lightblue" ><input name="Telephone" type="text" id="Telephone" size="38" /> </td>
<td><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="mailfrom">Email:</label></td>
<td align="left" class="lightblue" ><input name="mailfrom" type="text" id="mailfrom" size="38" /> </td>
<td><font size="1">Required</font></td>
</tr>

<tr>
<td><label for="comments">Comments?</label></td>
<td><textarea name="comments" cols="38" rows="3" id="comments"></textarea></td>
<td><font size="1">(optional)</font></td>
</tr>
<tr>
<td height="36" valign="top" class="lightblue"><br />
<br />
<br />
<br />
<br /></td>
<td height="36" colspan="2" valign="middle" class="lightblue"><input type="submit" value="Submit Your Order" name="B1" />
<span class="smallgreen"><font size="1">&lt;--
Click here to complete your Registration</font></span></td>
</tr>
<tr>
<td height="36" colspan="3" valign="middle" class="lightblue"><span class="spaced_line"><img src="https://sslrelay.com/bmfconferences.com/img/padlock2.gif" width="20" height="24" align="absmiddle" /> <font size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Secure Booking Area</font></strong> - This page is hosted on a 128-bit SSL secure server</font></span> </td>
</tr>
</table>
</form>

Javascrip validation:


<script language="JavaScript" type="text/JavaScript">
function validate() {
var message='';
var count=0;
formName=mainform.Name.value;
formCompany=mainform.Company.value;
formTelephone=mainform.Telephone.value;
formEmail=mainform.mailfrom.value;
formRequest=mainform.Request.value;
formRequest2=mainform.Request2.value;
formRequest3=mainform.Request3.value;

// set var checkbox_choices to zero

var checkbox_choices = 0;

// Loop from zero to the one minus the number of checkbox button selections
for (counter = 0; counter < checkbox_form.checkbox.length; counter++)
{

// If a checkbox has been selected it will return true
// (If not it will return false)
if (checkbox_form.checkbox[counter].checked)
{ checkbox_choices = checkbox_choices + 1; }

}

if (checkbox_choices < 1 )
{
// If there were less then selections made display an alert box
alert("Please tick which parts of the conference you will be attending. \n")
return (false);
}

if (formName=='') {
count=count + 1;
message=(message + count +". NAME :\t\tName Missing\n");
event.returnValue=false;
}
if (formCompany=='') {
count=count + 1;
message=(message + count +". ORGANISATION :\tOrganisation Missing \n");
event.returnValue=false;
}
if (formAddress=='') {
count=count + 1;
message=(message + count +". ADDRESS :\t\tAddress Missing \n");
event.returnValue=false;
}

if (formTelephone=='') {
count=count + 1;
message=(message + count +". TELEPHONE :\t\tTelephone No. Missing \n");
event.returnValue=false;
}
if (formEmail=='') {
count=count + 1;
message=(message + count +". EMAIL :\t\tEmail Address Missing\n");
event.returnValue=false;
}

if (count>0){
alert("You missed "+ count +" fields on this registration form.\nPlease fill in the following fields: \n\n"+ message +"\n Click OK to correct these errors");}
}
</SCRIPT>

Thanks in advance for any help.
Gareth

gareth886

10:29 am on Sep 11, 2007 (gmt 0)

10+ Year Member



Oops sorry, the code tags have got a bit messed up. I hope you can still read it properly.

penders

11:52 am on Sep 11, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It probably is running, but it is not preventing your form from being submitted. You need to return a value to the onsubmit event, in terms of:

onsubmit="return validate();"

Then, returning false (

return false;
) from your validate function will prevent the form from being submitted.

gareth886

1:27 pm on Sep 11, 2007 (gmt 0)

10+ Year Member



Hi, I'm still not getting anywhere with this. I've attached a stripped down the code so its easier to read and have attached it again below. I've also uploaded the webpage go you can see it up and running on the following link [planetipod.co.uk]. As you will see I have the other basic validation up and running but I don't know where to start with the checkbox validation.

Any suggestions on code?


<script language="JavaScript" type="text/JavaScript">
function validate() {
var message='';
var count=0;
formName=mainform.Name.value;
formCompany=mainform.Company.value;
formTelephone=mainform.Telephone.value;
formEmail=mainform.mailfrom.value;
if (formName=='') {
count=count + 1;
message=(message + count +". NAME :\t\tName Missing\n");
event.returnValue=false;
}
if (formCompany=='') {
count=count + 1;
message=(message + count +". ORGANISATION :\tOrganisation Missing \n");
event.returnValue=false;
}
if (formTelephone=='') {
count=count + 1;
message=(message + count +". TELEPHONE :\t\tTelephone No. Missing \n");
event.returnValue=false;
}
if (formEmail=='') {
count=count + 1;
message=(message + count +". EMAIL :\t\tEmail Address Missing\n");
event.returnValue=false;
}
if (count>0){
alert("You missed "+ count +" fields on this registration form.\nPlease fill in the following fields: \n\n"+ message +"\n Click OK to correct these errors");}
}
</SCRIPT>

Form Code below:


<form action="#" method="post" id="mainform" onsubmit="validate();">
<table width="100%" border="0" cellspacing="2" summary="Date Venue Info">
<tr>
<td colspan="3" valign="top"></td>
</tr>
<tr>
<td height="30" colspan="3" valign="top"><table width="100%" border="0" cellpadding="2" cellspacing="0" bgcolor="#F0EADA" style="border:1px solid #cccccc;" summary="User Input">
<tr valign="top">
<td width="18%" style="padding-top:6px;"><p class="topic"><label for="IWish">I wish to:</label></p></td>
<td>
<label>
<input type="checkbox" name="Request" id="Request" value="Attend Main Conference" />
Attend the <strong>Main Conference</strong><br />
<input type="checkbox" name="Request2" id="Request2" value="Attend Conference Dinner" />
Attend the <strong>Conference Dinner</strong><br />
<input type="checkbox" name="Request3" id="Request3" value="Attend Post Conference Workshop" />
Attend the <strong>Post-Conference Workshop</strong></label>
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="18%">&nbsp;</td>
<td align="left" class="lightblue">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><label for="Name">Name:</label></td>
<td width="54%" align="left" class="lightblue"><input name="Name" id="Name" type="text" size="38" />
</td>
<td width="28%"><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="Position">Job Title:</label></td>
<td align="left" valign="top" class="lightblue" ><input name="Position" type="text" id="Position" size="38" />
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><label for="Company">Organisation:</label></td>
<td align="left" valign="top" class="lightblue"><input name="Company" type="text" id="Company" size="38" />
</td>
<td><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="Telephone">Telephone:</label></td>
<td align="left" valign="top" class="lightblue" ><input name="Telephone" type="text" id="Telephone" size="38" />
</td>
<td><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="mailfrom">Email:</label></td>
<td align="left" class="lightblue" ><input name="mailfrom" type="text" id="mailfrom" size="38" />
</td>
<td><font size="1">Required</font></td>
</tr>
<tr>
<td><label for="comments">Comments?</label></td>
<td><textarea name="comments" cols="38" rows="3" id="comments"></textarea></td>
<td><font size="1">(optional)</font></td>
</tr>
<tr>
<td height="36" valign="top" class="lightblue"><br />
<br />
<br />
<br />
<br /></td>
<td height="36" colspan="2" valign="middle" class="lightblue"><input type="submit" value="Submit Your Order" name="B1" />
<span class="smallgreen"><font size="1">&lt;--
Click here to complete your Registration</font></span></td>
</tr>
<tr>
<td height="36" colspan="3" valign="middle" class="lightblue"><span class="spaced_line"><img src="https://sslrelay.com/bmfconferences.com/img/padlock2.gif" width="20" height="24" align="absmiddle" /> <font size="1"><strong><font face="Verdana, Arial, Helvetica, sans-serif">Secure Booking Area</font></strong> - This page is hosted on a 128-bit SSL secure server</font></span> </td>
</tr>
</table>
</form>