www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help with form validation and submission

  1. #1
    Join Date
    May 2010
    Posts
    3

    Help with form validation and submission

    Hi, brand new to these forums and I am fairly 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..

    Code:
    if ( document.emailForm.email.value== 0 )
    and I have found simple regEX like

    Code:
    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...

    Code:
    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

    http://jsbin.com/imesi3/edit

    Thanks so much for any help!

  2. #2
    Join Date
    May 2010
    Posts
    3
    I forgot to mention that Firebug reports the error that form is null in reference to this bit..

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

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    var emailRegex = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if ( !emailRegex.test(document.emailForm.email.value) )
    {
    alert ( "Invalid email." );
    return false;
    }
    Easier referencing:
    Code:
    <input type="image" src="signUpButt.gif" value="Submit" onclick="return checkAge(this.form)">
    .
    .
    function checkAge(form)
    {
    var emailRegex = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if ( !emailRegex.test(form.email.value) )
    {
    alert ( "Invalid email." );
    return false;
    }
    Last edited by Fang; 05-06-2010 at 01:05 AM.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  4. #4
    Join Date
    May 2010
    Posts
    3
    Great! Thanks Fang. Now if I can just figure out how to actually have it submit

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles