Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Multistep form validation issues - form submits too early

    Hello all,

    I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed.

    I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution.

    Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go).

    Cheers!
    -Dave

    The Javascript:
    Code:
    $(function validateForm(){
    		
        //original field values
        var field_values = {
                //id  :  value
                'name'  :  'your name',
                'email'  :  'email',
    			'phone'  :  '(555) 123-4567',
    			'other'  :  'other',
    			'detail'  :  'project overview'
        };
    
        //inputfocus
        $('input#name').inputfocus({ value: field_values['name'] });
        $('input#email').inputfocus({ value: field_values['email'] });
        $('input#phone').inputfocus({ value: field_values['phone'] });
    	$('input#other').inputfocus({ value: field_values['other'] });
    	$('input#detail').inputfocus({ value: field_values['detail'] });
    
        //reset progress bar
        $('#progress').css('width','0');
        $('#progress_text').html('0% Complete');
    
        //first_step
        $('form').submit(function(){  });
        $('#submit_first').click(function(){
            //remove classes
            $('#first_step input').removeClass('error').removeClass('valid');
    
            //ckeck if inputs aren't empty
            var emailPattern = /^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;  
            var fields1 = $('#first_step input[type=text]');
            var error = 0;
            fields1.each(function(){
                var value = $(this).val();
                if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
                    $(this).addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                    
                    error++;
                } else {
                    $(this).addClass('valid');
                }
            });        
            
            if(error <= 0) {   
                    //update progress bar
                    $('#progress_text').html('25% Complete');
                    $('#progress').css('width','85px');
                    
                    //slide steps
                    $('#first_step').slideUp();
                    $('#second_step').slideDown();                 
            } else 
    			return false;
        });
    
    	$('#back_second').click(function(){
    
                    //update progress bar
                    $('#progress_text').html('0% Complete');
                    $('#progress').css('width','0px');
                    
                    //slide steps
                    $('#second_step').slideUp();
                    $('#first_step').slideDown();     
    
        });
    
        $('#submit_second').click(function(){
            //remove classes
            $('#second_step input').removeClass('error').removeClass('valid');
     
            var fields2 = $('#second_step input[textarea]');
            var error = 0;
            fields2.each(function(){
    			var value = $(this).val();
    			
                if( value.length<5 || value==field_values[$(this).attr('id')] ) {
                    $(this).addClass('error');
                    $(this).effect("shake", { times:3 }, 50);
                    
                    error++;
                } else {
                    $(this).addClass('valid');
                }	
    		});	
    		
            if(error <= 0) { 
                    //update progress bar
                    $('#progress_text').html('50% Complete');
                    $('#progress').css('width','170px');
                    
                    //slide steps
                    $('#second_step').slideUp();
                    $('#third_step').slideDown();     
            } else 
    			return false;
    
        });
    
    	$('#back_third').click(function(){
    
                    //update progress bar
                    $('#progress_text').html('25% Complete');
                    $('#progress').css('width','85px');
                    
                    //slide steps
                    $('#third_step').slideUp();
                    $('#second_step').slideDown();     
    
        });
    
        $('#submit_third').click(function(){
            //update progress bar
            $('#progress_text').html('75% Complete');
            $('#progress').css('width','255px');
    
            //prepare the fourth step
    		var fields3 = new Array(
    			$('#time').val(),  
    			$('#budget').val()             
            );
    		var fields2half = new Array(
    			$('#detail').val()
    		);
    		var fields2 = new Array(
                $('#other').val(),   
    			$('#pages').val()		
    		);	
    
    		var fields1 = new Array(
                $('#name').val(),
                $('#email').val(),
                $('#phone').val(),
                $('#contact').val(),
                $('#url').val()
    		);
            var tr = $('#fourth_step tr');
            tr.each(function(){
                //alert( fields[$(this).index()] )
                $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
    			$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
    			$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
    			$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
            });
                    
            //slide steps
            $('#third_step').slideUp();
            $('#fourth_step').slideDown();            
        });
    
    	$('#back_fourth').click(function(){
    
                    //update progress bar
                    $('#progress_text').html('50% Complete');
                    $('#progress').css('width','170px');
                    
                    //slide steps
                    $('#fourth_step').slideUp();
                    $('#third_step').slideDown();     
    
        });
    
        $('#submit_fourth').click(function(){
            //send information to server
    
    		        //update progress bar
                    $('#progress_text').html('100% Complete');
                    $('#progress').css('width','339px');
                    
                    //slide steps
                    $('#fifth_step').slideUp();
                    $('#fourth_step').slideDown(); 
    				
    		if(error <= 0) {        	
            	return true
        	}
        	else{
        		return false
        	}
    				  
        });
    
    });

  2. #2
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question

    The HTML:
    Code:
        <div id="containergrid">
            <form name="requestaquote" method="post" action="#" onsubmit="return validateForm(); return false;" >
    			<input type="hidden" name="ccf_customhtml" value="2" />
    			<input type="hidden" name="thank_you_page" value="/contact/request-quote/thank-you/" />
    			<input type="hidden" name="destination_email" value="[email protected]" />
                <input type="hidden" name="required_fields" value="" />
    	
                <!-- #first_step --> 
                <div id="first_step"> 
                    <h1>Step 1 - General Info</h1> 
     
                    <div class="form" style="margin-top:0px;"> 
                    
                    <div style="width:360px; float:left;">
                    	<div style="padding:0 0 0 95px;">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" value="your name" /> 
                        
                        <label for="email">Email</label>
                        <input type="text" name="email" id="email" value="email" /> 
                        
                        <label for="phone">Phone</label>
                        <input type="text" name="phone" id="phone" value="(555) 123-4567" />
                    	</div>    
                    </div>
                    
                    <div style="width:360px; float:right;">  
                    	<div style="padding:0 95px 0 0px;"> 
    					<label for="url">Current Website, if any</label>
                        <input type="text" name="url" id="url" value="http://" />
                                           
                        <label for="contact">How would you prefer to be contacted?</label>
                        <select id="contact" name="contact"> 
                            <option>via email</option> 
                            <option>via phone call</option> 
                            <option>via text message</option>
                        </select> 
                        </div>
                    </div>     
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
                    <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />                 
                    
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
     
     
                <!-- #second_step --> 
                <div id="second_step"> 
                    <h1>Step 2 - Project Requirements</h1> 
     
                    <div class="form" style="margin-top:0px;"> 
                    
                    <div> <div style="width:340px; float:left; padding:0 0 0 50px;">                    
                    	<div>
                        	<label style="width:360px;" for="requirements">Select the services you are seeking for your<br />project. Please check all that apply.</label>
                            <br /><br /><br />
                        </div>
                    
                        <div style="width:170px; float:left; margin-bottom:25px; padding:0 0 0 0px;">
                            <input type="checkbox" class="checkbox" name="box[]" id="basicwebsite" value="basic website" onClick="SetHTML3(this.checked,'a1')" /> 
                        	<label class="cblabel" for="basic website">Basic Website</label>
                               
                        	<input type="checkbox" class="checkbox" name="box[]" id="advancedwebsite" value="advanced website" onClick="SetHTML3(this.checked,'a2')" /> 
    						<label class="cblabel" for="advanced website">Advanced Website</label>
    
                        	<input type="checkbox" class="checkbox" name="box[]" id="siteredesign" value="site redesign" onClick="SetHTML3(this.checked,'a3')" /> 
                            <label class="cblabel" for="site redesign">Site Redesign</label>
    
                        	<input type="checkbox" class="checkbox" name="box[]" id="ecommercesite" value="e-commerce site" onClick="SetHTML3(this.checked,'a4')" /> 
                            <label class="cblabel" for="ecommerce site">E-Commerce Site</label>
    
                        	<input type="checkbox" class="checkbox" name="box[]" id="dynamiccontent" value="dynamic content" onClick="SetHTML3(this.checked,'a5')" /> 
                            <label class="cblabel" for="dynamic content">Dynamic Content</label>                            
                        </div>
                    
                        
                        <div style="width:170px; float:right;">
                        	<input type="checkbox" class="checkbox" name="box[]" id="blogging" value="blogging" onClick="SetHTML3(this.checked,'b1')" /> 
                            <label class="cblabel" for="blogging">Blogging</label>
                        
                        	<input type="checkbox" class="checkbox" name="box[]" id="onlinebranding" value="online branding" onClick="SetHTML3(this.checked,'b2')" /> 
                            <label class="cblabel" for="online branding">Online Branding</label>
                        
                        	<input type="checkbox" class="checkbox" name="box[]" id="maintenancepackage" value="maintenance package" onClick="SetHTML3(this.checked,'b3')" />
                            <label class="cblabel" for="maintenance package">Maintenance Package</label>
                        
                        	<input type="checkbox" class="checkbox" name="box[]" id="psdtoxhtml" value="psd to xhtml" onClick="SetHTML3(this.checked,'b4')" />  
                            <label class="cblabel" for="psd to xhtml">PSD to XHTML</label>
                        
                        	<input type="checkbox" class="checkbox" name="box[]" id="membershipsite" value="membership site" onClick="SetHTML3(this.checked,'b5')" /> 
                            <label class="cblabel" for="membership site">Membership Site</label>
                        </div>
                    
                        <div>
                        	<label for="other">Don't see what you want? Please specify:</label>
                        	<input type="text" name="other" id="other" value="" /> 
                       	</div>
                    </div> </div>
                    
                    
                    <div style="width:360px; float:right; padding: 0 50px 0 0;">
                    	<div>
                        	<label for="pages">How many pages do you see your site having?</label>
                        <select id="pages" name="pages"> 
                            <option>1-5 pages (basic)</option> 
                            <option>6-10 pages</option> 
                            <option>11-25 pages</option>
                            <option>26-50 pages</option>
                            <option>51-100 pages</option>
                            <option>over 100 pages</option>
                            <option>I have no idea!</option>
                        </select> 
                        
                        	<label style="width:360px;" for="detail">Please explain your project in as much detail as possible. This will help me in projecting a more accurate delivery. Include things like general goals, related sites, overall scope and target audience.</label>
                            
                        	<textarea name="detail" id="detail" />The goal for this site is to </textarea>	
                        </div>
                    </div>  
                     
                          <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
                    <input class="back" type="submit" name="back_second" id="back_second" value="" /> 
                    
                    <input class="submit" type="submit" name="submit_second" id="submit_second" value="" /> 
                    
                </div>
             </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
     
     
                <!-- #third_step --> 
                <div id="third_step"> 
                    <h1>Step 3 - Time Frame and Budget</h1> 
     
                    <div class="form" style="margin-top:40px;"> 
                    
                    	<div style="width:600px; margin: 0 auto; padding:0 0 0 80px;">
                        	<label style="width:500px; text-align:center;" >This is perhaps the most important part of the process. Your overall budget realistically dictates how much time I will be able to devote to your project. Please note that your actual project budget will be based largely on your project requirements and projected time frame.</label>
                            <br /><br /><br /><br />
                        </div>
                        <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
                    	
                        <div style="width:300px; float:left; padding:0 0 0 140px">
                        	<label for="time">Select a projected time frame</label>
                        	<select id="time" name="time"> 
                            	<option>1-2 weeks</option> 
                            	<option>3-6 weeks</option> 
                            	<option>7-12 weeks</option>
                                <option>3-6 months</option>
                                <option>6-12 months</option>
                                <option>over 1 year</option>
                                <option>I have no idea!</option>
                        	</select> 
    
                        </div>
                        
                        <div style="width:300px; float:right; padding:0 95px 0 0px;">
    						<label for="budget">Propose an overall project budget</label>
                        	<select id="budget" name="budget"> 
                            	<option>$100 - $500 USD</option> 
                            	<option>$500 - $1000</option> 
                                <option>$1000 - $1500</option>
                                <option>$1500 - $2500</option>
                                <option>$2500 - $5000</option>
                                <option>$5000 - $8000</option>
                                <option>more than $8000</option>
                                <option>I have no idea!</option>
                        	</select>
    
                        </div>
                        
                    </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
                    <input class="back" type="submit" name="back_third" id="back_third" value="" /> 
                    
                    <input class="submit" type="submit" name="submit_third" id="submit_third" value="" onClick="DoTheCheck()"/> 
                    
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
                
                
                <!-- #fourth_step --> 
                <div id="fourth_step"> 
                    <h1>Step 4 - Review Your Project Requirements</h1> 
     
                    <div class="form" style="margin-top:20px;"> 
    
    					<div style="float:left;">
    					<div style="width:300px;">
                        <table class="1"> 
                            <tr><td>Name:</td><td style="color: #a90329;"></td></tr> 
                            <tr><td>Email:</td><td style="color: #a90329;"></td></tr> 
                            <tr><td>Phone:</td><td style="color: #a90329;"></td></tr> 
                            <tr><td>Contact:</td><td style="color: #a90329;"></td></tr> 
                            <tr><td>Website:</td><td style="color: #a90329;"></td></tr> 
                        </table>
                        </div>
                        
                        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                        
                        <div style="width:300px;padding: 0 0 0 0;">
                        <div style="margin: 0px 0 -10px 48px;">
                            <div style="width:120px; margin: 8px 0 10px 0px; font-size: 13px; font-weight: bold; color: #000;">Requirements:</div>
                            <div style="width:285px; margin: -26px 0 0px 15px; font-size: 13px; font-weight: bold; color: #a90329; text-indent:80px;">
    							<span id='a1' style="display:none">Basic Website, </span>
    							<span id='a2' style="display:none">Advanced Website, </span>
                                <span id='a3' style="display:none">Site Redesign, </span>
                                <span id='a4' style="display:none">E-Commerce Site, </span>
                                <span id='a5' style="display:none">Dynamic Content, </span>
                                <span id='b1' style="display:none">Blogging, </span>
                                <span id='b2' style="display:none">Online Branding, </span>
                                <span id='b3' style="display:none">Maintenance Package, </span>
                                <span id='b4' style="display:none">PSD to XHTML, </span>
                                <span id='b5' style="display:none">Membership Site</span>
                            </div>         
                        </div>
                        </div>
                        
                        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                        
                        <div style="width:300px;padding: 2px 0 0 0;">
                        <table class="2">
                            <tr><td style="width:80px;">Other (if any):</td><td style="color: #a90329;"></td></tr> 
                            <tr><td style="width:80px; padding: 8px 0 0 0;">Project Size:</td><td style="color: #a90329;"></td></tr>                   
                        </table>
                        </div>
                        
                        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                        
                        <div style="width:300px;">
                        <table class="3">
                            <tr><td>Timeframe:</td><td style="color: #a90329;"></td></tr> 
                            <tr><td>Budget:</td><td style="color: #a90329;"></td></tr> 
                        </table> 
                        </div>
                        </div>
    
    					<div style="float:right; padding:0 40px 0 0;">
                        <div style="width:500px;">
                        <table>                                    
                            <tr><td>Project Details:</td><td style="color: #a90329;"><script type="text/javascript">document.getElemnetByType('checkbox').value.replace(/\n/g,'
    ');</script></td></tr> 
                        </table>
                        </div>
                        
                        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                        
                        <div style="width:500px; margin-top:-16px;">
                        <table class="2half">                                    
                            <tr><td></td><td style="font-size:12px; line-height:1em; color: #a90329;"></td></tr> 
                        </table>
                        </div>
                        </div>
                        
                        <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                        
                        
                <!-- #fifth_step --> 
                <div id="fifth_step"> 
                                      
                </div>      
                
                <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                        
                        
                    </div>      
                    
                    <!-- clearfix --><div class="clear"></div><!-- /clearfix --> 
                    
                    <input class="back" type="submit" name="back_fourth" id="back_fourth" value="" /> 
                    
                    <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value="" />            
                </div> 
                
            </form> 
    	</div> 
    	<div id="progress_bar"> 
            <div id="progress"></div> 
            <div id="progress_text">0% Complete</div> 
    	</div> 
    	</div>

  3. #3
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oops... almost forgot. To see this code in (crippled) action, visit:

    http://new.dauidusdesign.com/contact/request-quote/

  4. #4
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I figured this one out on my own... just had to add onClick="return false;" to each submit button that I wanted to prevent from sending the form. Then, leave the last one as is.

    Cheers!


 

Posting Permissions

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