HTML form validation

  • slinxter

    (@slinxter)


    15 years, 2 months ago

    Hi all,

    I’m trying to run a web-to-lead form on a WP page, and for some reason the Dreamweaver validation isn’t working. Any ideas why this Javascript would fail, or how I can validate this form?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script>
<style type="text/css">
<!--
.style1 {
color: #666666;
font-style: italic;
}
-->
</style>

<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name="oid" value="00D200000000DLp">
<input type=hidden name="retURL" value="http://www.procurementleaders.com/thank-you">

<label for="salutation"></label>
<input type=hidden name="00N20000000hi7N" value="newsletter_select">
<br />

<label for="first_name"></label>

<table width="90%" align="left" >
<tr>
<td>&nbsp;</td>
<td colspan="2">Please enter your details below to register to receive our newsletters.</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="0%"></td>
<td width="43%">Salutation</td>
<td width="50%">
<div align="left">
<select  id="salutation" name="salutation">
<option value="">--None--</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Miss">Miss</option>
</select>
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>First Name</td>
<td align="left">
<div align="left">
<input  id="first_name" maxlength="40" name="first_name" size="20" type="text" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Last Name</td>
<td align="left">
<div align="left">
<input  id="last_name" maxlength="40" name="last_name" size="20" type="text" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Company</td>
<td align="left"><div align="left">
<input  id="company" maxlength="40" name="company" size="20" type="text" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Country</td>
<td align="left"><input  id="country" maxlength="80" name="country" size="20" type="text" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Email</td>
<td align="left"><div align="left">
<input  id="email" maxlength="80" name="email" size="20" type="text" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top"><hr></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top"><p>Please select which of our newsletters you wish to receive.</p>  </td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="bottom">Procurement Leaders Newsfeed      </td>
<td valign="bottom"><input name="00N20000001kBzR" type="checkbox"  id="00N20000001kBzR" value="1" checked /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="bottom">Sustainable Sourcing    </td>
<td valign="bottom"><input name="00N20000001kBzg" type="checkbox"  id="00N20000001kBzg" value="1" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top"><input name="submit" type="submit" value="Submit" onClick="MM_validateForm('first_name','','R','last_name','','R','company','','R','country','','R','email','','RisEmail');return document.MM_returnValue"></td>
<td>&nbsp;</td>
</tr>

<tr>
<td height="48">&nbsp;</td>
<td colspan="2">To view a sample of the Procurement Leaders weekly newsfeed, please click <a href="http://view.exacttarget.com/?j=fe801c7872620d7a77&m=fef91677716001&ls=fe151c70726d0d7b721375&l=fefb1070706102&s=fe3d15707666017d771673&jb=ffcf14&ju=fe5312757160067a7c13">here</a>. </td>
</tr>
</table>
<br />

</form>
<body>
</body>
</html>
Viewing 5 replies - 1 through 5 (of 5 total)
  • scribu

    (@scribu)

    15 years, 2 months ago

    Erm, use a jQuery form validation script instead of the Dreamweaver one?

    Thread Starter slinxter

    (@slinxter)

    15 years, 2 months ago

    Hi scribu – thanks for the response.

    I’ve searched online and I can only find instructions for validating comments – not HTML forms like in my example.

    Would anyone be assist me in finding some help on this?

    Thread Starter slinxter

    (@slinxter)

    15 years, 2 months ago

    I’m trying my damnedest – anyone see why this would fail?

    Any help would be much appreciated!!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<style type="text/css">
* { font-family: Verdana; }
label { float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
  <script>
  $(document).ready(function(){
    $("#commentForm").validate();
  });
  </script>
  </head>
<body>
<fieldset>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00D200000000DLp">
<input type=hidden name="retURL" value="http://www.procurementleaders.com/thank-you">
<input type=hidden name="00N20000000hi7N" value="newsletter_select">
<table width="90%" align="left" >
<tr>
<td>&nbsp;</td>
<td colspan="2">Please enter your details below to register to receive our newsletters.</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="0%"></td>

<td width="43%"><label for="salutation"></label></td>
<td width="50%">
<div align="left">
<select  id="salutation" name="salutation">
<option value="">--None--</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
<option value="Miss">Miss</option>
</select>
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label for="first_name">First Name</label></td>
<td align="left">
<div align="left">
<input id="first_name" name="first_name" size="25" class="required" minlength="2" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label for="last_name">Last Name</label></td>
<td align="left">
<div align="left">
<input id="last_name" name="last_name" size="25" class="required" minlength="2" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label for="company">Company</label></td>
<td align="left"><div align="left">
<input id="company" name="company" size="50" class="required" minlength="2" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label for="country">Country</label></td>
<td align="left"><input id="country" name="country" size="80" class="required" minlength="2" />
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><label for="email">Email</label></td>
<td align="left"><div align="left">
<input  id="email" maxlength="80" name="email" size="20" type="text" class="required email" />
</div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top"><hr></td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top"><p>Please select which of our newsletters you wish to receive.</p>  </td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan="2" valign="top">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="bottom">Procurement Leaders Newsfeed      </td>
<td valign="bottom"><input name="00N20000001kBzR" type="checkbox"  id="00N20000001kBzR" value="1" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="bottom">Sustainable Sourcing    </td>
<td valign="bottom"><input name="00N20000001kBzg" type="checkbox"  id="00N20000001kBzg" value="1" checked="checked" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td valign="top"><input name="submit" type="submit" value="Submit"></td>
<td>&nbsp;</td>
</tr>

<tr>
<td height="48">&nbsp;</td>
<td colspan="2">&nbsp;</td>
</tr>
</table>
<br />
 </fieldset>
</form>

</body>
</html>
    scribu

    (@scribu)

    15 years, 2 months ago

    How about just using cforms 2 or another plugin that already has form validation?

    Thread Starter slinxter

    (@slinxter)

    15 years, 1 month ago

    Thanks – but I can’t find any plugins that support web-to-lead forms, I am trying to feed this data back into my CRM tool.

    Unless anyone has any suggestions?

    Thanks, Steve

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘HTML form validation’ is closed to new replies.