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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13325 seconds
  • Memory Usage 2,881KB
  • Queries Executed 15 (?)
More Information
Template Usage (33):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (6)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (4)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (4)postbit
  • (4)postbit_onlinestatus
  • (4)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (71):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates