Help please with form validation and submission

JavaScript
1

Hi, I am new to javaScript / spoiled by jQuery and I am struggling with a sign up form.

So far I have it successfully perform an age check and set a cookie/change display depending on the answer. However an important piece (actually submitting the sucker) does not seem to be working.

I also need to add better validation… right now I just have an alert popup… how could I instead just have a hidden error message become visible. Would I
use document.getElementByID(‘myID’).innerHTML = “Set my styles in here?”

I did have a cheesy email validation that just checked to see if it was blank…

if ( document.emailForm.email.value== 0 )

and I have found simple regEX like

var emailRegex = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

however I am not having success integrating that into my script

So any help with these issues and just general feedback about the script would be very much appreciated.

Here is what I have so far…

function createCookie(name,value,days){
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

var x = readCookie('age');
window.onload=function(){
if (x==null)  {    
};
if (x=='over13')  {    
document.getElementById('emailBox').innerHTML = "<img src=\\"Thanks.gif\\"><br /><p style=\\"margin-left: 10px; width: 350px\\">stuff<br /><br /";
};
if (x=='not13')  {    
document.getElementById('emailBox').innerHTML = "<img src=\\"Sorry.gif\\"><br /><p>If you're under 13, you should not register or sign up for our email.<br /><br />...";
};
}
  
  
function checkAge()
{
//first looks to see if any selection was made
if ( document.emailForm.year.selectedIndex == 0 )
{
alert ( "Please select your Age." );
return false;
}
//checks if selection is older than 13
var min_age = 13;
var year = parseInt(document.forms["emailForm"]["year"].value);
var month = parseInt(document.forms["emailForm"]["month"].value) - 1;
var day = parseInt(document.forms["emailForm"]["day"].value);
var theirDate = new Date((year + min_age), month, day);
var today = new Date;
//if they are not old enough display message and set cookie
if ( (today.getTime() - theirDate.getTime()) < 0) {  
document.getElementById('emailBox').innerHTML = "<img src=\\"Sorry.gif\\"><br /><p>If you're under 13, you should not register or sign up for our email.<br /><br />...";
createCookie('age','not13',0)
return false;
}
//if they are old enough display message and set cookie and submit
else {
document.getElementById('emailBox').innerHTML = "<img src=\\"Thanks.gif\\"><br /><p style=\\"margin-left: 10px; width: 350px\\">stuff<br /><br /";
createCookie('age','over13',0);
var form = document.getElementById('theForm');
if(form != null)
form.submit();
return true;
};
};
</script>

</head>
<body>

<div id="emailBox">
<div class="emailBox2">

<form id="theForm"  method='post' name="emailForm" action="http://whatcounts.com/bin/listctrl">
<input type=hidden name="slid" value="234234">
<input type=hidden name="cmd" value="subscribe">

<table border="0" cellspacing="2" style="margin-left: 30px">
<tr height="30">
  <td>Email <span class="red">*</span></td><td><input type='text' name="email" size="40">
<div class="emailError">Please enter your email address</div>
</td>  

...

	<td>Birthday</td>
	<td><select name='month' style='width:70px; margin-right: 10px'>
				<option value=''>Month</option>
				<option value="1">Jan</option>
			    <option value="2">Feb</option>

	...
			</select><select name='day' style='width:55px; margin-right: 10px'>
			  <option value=''>Day</option>

				<option value="1">1</option>
			    <option value="2">2</option>
			    <option value="3">3</option>
			    <option value="4">4</option>
			    <option value="5">5</option>
			    <option value="6">6</option>
...

			    <option value="31">31</option>
		  </select>
<select name='year' style='width:60px;' class="validate[required]">
				<option value=''>Year</option>
			    
<option value="2007">2007</option>
			    <option value="2006">2006</option>
			    <option value="2005">2005</option>
...
</select>

<div style="float:right;margin:10px 0 0px 0px;"> 

<input type='image' src='signUpButt.gif' value='Submit' onClick="return checkAge()" />

and same thing at JS Bin

Firebug shows the error that the form is null referring to this bit…

var form = document.getElementById('theForm');
if(form != null)
form.submit();
return true;

Thanks so much for any help!

2

Are you also validating server-side? Don’t forget that the end user might not have javascript enabled and so validation done with javascript would not work for them.