PDA

View Full Version : Advanced Forms validation in JavaScript...

Opteknerv
08-29-2001, 01:15 PM
I'm having some problems getting my form to validate properly for the 'Age' field. An explanation and some help would be greatly appreciated if anyone knows.

The idea is for the form to provide an error dialogue if the Age field is blank or contains a number that is less than 13 (13 and above are accepted). It works fine if you put 1, 10, 11 or 12. However if you put a single digit such as 2 through 9 if reads this as acceptable. I'm guessing it relates to the fact that these numbers are in the tenths place and the script doesnt understand the decimal system, but really I'm not sure.

Here's a link to the form:
http://www.eckounlimited.com/unplugyouridol/register/index.html

Here's the source:

<html>
<head>
<script language="JavaScript">

<!--
function MM_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.argument s;
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+='- You must specify a valid email address.\n';
} else if (test!='R') {
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 (val<min || max<val) errors+='- Sorry, you must be at least 13 years old to register at Ecko.com. Please have your parent or legal guardian register your information for you.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('Warning: Invalid submission. Please observe the following...\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->

</script>
</head>
<body marginwidth=0 marginheight=20 leftmargin=0 rightmargin=0 bottommargin=0 topmargin=20 bgcolor="#660000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<BASEFONT FACE=ARIAL>
<FORM Action="http://www.ecko.com/cgi-bin/yform.cgi" Method="post" onSubmit="MM_validateForm('First Name','','R','Last Name','','R','Email','','RisEmail','Age','','RinRange13:99999');r eturn document.MM_returnValue">
<table width="320" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><font face="Arial, Helvetica, sans-serif" size="1" color="#666666"><b><font color=#b30113 size=2><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" size="1">This
survey is about you, the Ecko clothing buyer. Please complete
this questionnaire by filling out the information in the
spaces provided. Filling this out today will register you
as a member of Ecko.com and allow us to keep you updated
on our new developments, products, and adventures. Thank
you for your continued support of Ecko.<br>
<br>
Please fill in the form below.</font></font><font color="#FFFFFF" size="1"><br>
<font face="Arial, Helvetica, sans-serif" color="#FF0000">Fields
marked with * are required.</font></font></b><font size="1"><br>
<font color="#FFFFFF"><br>
*First
Name:<br>

<input type="TEXT" name="First Name">
<br>
<br>
*Last
Name:<br>

<input type="TEXT" name="Last Name">
<br>
<br>
Street
Address:<br>

<input type="TEXT" name="Address">
<br>
<br>
City:<br>

<input type="TEXT" name="City">
<br>
<br>
State/Province:<br>

<input type="TEXT" name="State">
<br>
<br>
Zip
Code:<br>

<input type="TEXT" name="Zip">
<br>
<br>
Country:<br>

<input type="TEXT" name="Country">
<br>
<br>
*E-Mail
Address:<br>

<input type="TEXT" name="Email">
<br>
<br>
*Age:<br>

<input type="TEXT" name="Age">
<br>
<br>
*Gender:<br>

<select name="Gender">

<option value=" " SELECTED><font face="Arial, Helvetica, sans-serif">Select One</font></option>

<option value="M"><font face="Arial, Helvetica, sans-serif">Male</font></option>

<option value="F"><font face="Arial, Helvetica, sans-serif">Female</font></option>

</select>
<br>
<br>
Race:<br>

<select name="Race">Highest level of education completed: <option value=" " SELECTED><font face="Arial, Helvetica, sans-serif">Select One</font></option>

<option value="African American"><font face="Arial, Helvetica, sans-serif">African American</font></option>

<option value="White"><font face="Arial, Helvetica, sans-serif">White</font></option>

<option value="Asian/Pacific Islander"><font face="Arial, Helvetica, sans-serif">Asian/Pacific Islander</font></option>

<option value="Hispanic/Latino"><font face="Arial, Helvetica, sans-serif">Hispanic/Latino</font></option>

<option value="Native American"><font face="Arial, Helvetica, sans-serif"> Native American</font></option>

<option value="Other"><font face="Arial, Helvetica, sans-serif">Other</font></option>

</select>
<br>
<br>
Highest
level of education completed:<br>

<select name="Edu">

<option value=" " SELECTED><font face="Arial, Helvetica, sans-serif">Select One</font></option>

<option value="Graduated college"><font face="Arial, Helvetica, sans-serif">Graduated college</font></option>

<option value="Attended college"><font face="Arial, Helvetica, sans-serif">Attended college</font></option>

<option value="Some high school"><font face="Arial, Helvetica, sans-serif">Some high school</font></option>

<option value="Still in grades 1-12"><font face="Arial, Helvetica, sans-serif">Still in grades 1-12</font></option>

</select>
<br>
<br>
How
did you find this page?:</font><br>

<select name="Referer">

<option value=" " SELECTED><font face="Arial, Helvetica, sans-serif" color="#666666">Select One</font></option>

<option value="TagCD"><font face="Arial, Helvetica, sans-serif" color="#666666">Ecko Complex TagCD</font></option>

<option value="ComplexMag"><font face="Arial, Helvetica, sans-serif" color="#666666">Complex's Homepage</font></option>

<option value="Ecko.com"><font face="Arial, Helvetica, sans-serif" color="#666666">Ecko's Homepage</font></option>

</select>
<br>
<br>
<input type="Submit" value="Register" name="Submit">
</font></font></td>
</tr>
</table>
<input type=hidden name="html_redirect" value="http://www.ecko.com/register/thanks.html">
<input type=hidden name="mail_recipient" value="register@ecko.com">
<input type=hidden name="mail_subject" value="Registration at Ecko.com">
<input type=hidden name="mail_top">
<input type=hidden name="mail_listfields" value="First Name, Last Name, Address, City, State, Country, Email, Age, Gender, Race, Edu, Referer">
<input type=hidden name="mail_bottom">
<input type="hidden" name="data_filename" value="registration.txt">
<input type="hidden" name="data_fields_to_log" value="First Name, Last Name, Address, City, State, Country, Email, Age, Gender, Race, Edu, Referer">
<input type="hidden" name="data_listvertical">
<input type="hidden" name="data_delimiter" value=" ">
</FORM>
</body>
</html>
daledude
08-30-2001, 05:53 PM
Change your line to the following and it should work.

if (parseInt(val)<parseInt(min) || parseInt(max)<parseInt(val)) errors+='- Sorry, you must be at least 13 years old to register at Ecko.com. Please have your parent or legal guardian register your information for you.\n';

Good luck,
Dale