multipage forms - with validation at each step!! help!

[barbs75]

Hey guys,

 

I have checked in google and on this forum for answers to my question but haven't found anything regarding validating each step of a multipage form, hence my post!

 

I wonder if anyone can help me, or rather provide me with advice....

 

I am trying to create a multipage form, which so far i have done a basic one which i have done using my php cookbook by O'Reilly which is a very basic version, without any validations or anything....

 

My multipage has 3 steps:

• Step1: user details - takes users name, email etc
  
• Step 2: House details - Takes users address, house type, no of rooms, descriptions of rooms etc
  
• Step 3: Image upload - Allows user to upload 3 images max to display (using my original file upload script)
  

 

As i said, my basic multipage form works, storing all posted values into sessions which can then be outputted at the end in a review page, which will be at the end of the form.

 

In previous forms i have created, i always have an html form, which when posted or submitted, has an action of a separate php script which processes the form and validates it, sends email, updates database etc, and all errors are then stored in sessions and appear back on the form page until there are no errors displayed and then a success page is shown....

 

so the code i have taken from my cookbook doesn't seem to be able to allow me to validate EACH STEP of the form? it can validate at the end, when the user reviews and then the form is processed all in one go. But i want to be able to validate form entries at each step, rather than in one go.

For example if a user leaves their 'town' field empty, an error message will be displayed before going to the next step...

 

If you see the code i have done so fare below:

<?php
                //Figure out what stage to use
                if (($_SERVER['REQUEST_METHOD'] == 'GET') || (! isset($_POST['stage'])))
                {
                    $stage = 1;
                }
                else
                {
                    $stage = (int) $_POST['stage'];
                }
                
                //Save any submitted data
                if ($stage > 1)
                {
                    foreach ($_POST as $key => $value)
                    {
                        $_SESSION[$key] = $value;
                    }
                }
                
                if ($stage ==1)
                {?>
                <div id="submitCustomerForm">
				<FORM ACTION='<?php echo $_SERVER['SCRIPT_NAME'] ?>' method='post'>
                    	<h7>Your details</h7>
                        <br />
                    	<div id="inputfield">
                    		<label class="textleft" for="forename">forename:</label>
                            <input class="fade" name="forename" type=text size="30" align="right" maxlength="15" id="forename" value="<?php echo $_SESSION['forename']?>">
                    	</div> 
                        <div id="inputfield">
                    		<label class="textleft" for="surname">surname:</label>
                    		<input class="fade" name="surname" type=text size="30" maxlength="15" id="surname" align="right" value="<?php echo $_SESSION['surname']?>">
                    	</div>
                    	<div id="inputfield">
                    		<label class="textleft" for="email">email:</label>
                    		<input class="fade" name="email" type=text size="30" maxlength="30" align="right" id="email" value="<?php echo $_SESSION['email']?>">
                    	</div>
                        <br />
                        <h7>Your property Address</h7>
                        <br />
                    	<div id="inputfield">
                        	<label class="textleft" for="address1">Address Line 1:</label>
                        	<input class="fade" name="address1" type=text size="30" maxlength="30" id="address1" value="<?php echo $_SESSION['address1'];?>" />
                        </div>
                        <div id="inputfield">
                        	<label class="textleft" for="address2">Address Line 2:</label>
                        	<input class="fade" name="address2" type=text size="30" maxlength="30" id="address2" value="<?php echo $_SESSION['address2'];?>" />
					</div>
                        <div id="inputfield">
                            <label class="textleft" for="town">Town/City:</label>
                            <input class="fade" name="town" type=text size="30" maxlength="30" id="town" value="<?php echo $_SESSION['town'];?>" />
                        </div>
                        <div id="inputfield">
                            <label class="textleft" for="county">County:</label>
                            <input class="fade" name="county" type=text size="30" maxlength="30" id="county" value="<?php echo $_SESSION['county'];?>" />
                        </div>
                        <div id="inputfield">
                            <label class="textleft" for="postcode">Post Code:<span class="asterix">*</span></label>
                            <input class="fade" name="postcode" type=text size="30" maxlength="30" id="postcode" value="<?php echo $_SESSION['postcode'];?>" />
                    	</div>
                        <input type='hidden' name='stage' value='<?php echo $stage + 1 ?>'/>
                        <input name="Next" class="submit" type="image" align ="right" src="Images/updateButton.png" />
                    </FORM>
                </div>
                
                <?php } else if ($stage == 2) { ?>
                <div id="submitCustomerForm">
                	<FORM ENCTYPE="multipart/form-data" action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="post">
                		<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
                        <div id="divinputfile">
                            <input name="userfile" type="file" size="30" id="userfile" onchange="document.getElementById('fakeuserfile').value = this.value;"/>
                            <div id="fakeinputfile"><input name="fakeuserfile" type="text" id="fakeuserfile" /></div>
                       </div>
                    	<br />
                        <input type='hidden' name='stage' value='<?php echo $stage + 1 ?>'/>
					<input type="image" src="Images/upload.png" align="right" name="Send File" />
                    	<br />
                    	<br />
              	   </FORM>
                </div>
                
                <?php } else if ($stage == 3) {?>
                <p class="largeblue">
                	hello there <?php echo $_SESSION['forename']; echo $_SESSION['surname'];?>
                    <br />
                    the first line of your address is: <?php echo $_SESSION['address1'];?>
                    <br />
                    the second line of your address is: <?php echo $_SESSION['address2'];?>
                </p>
                <?php } ?>

 

For the 'form action' it uses

<?php echo $_SERVER['SCRIPT_NAME'] ?>

meaning that the form reloads the page, upon which the stage number has changed and therefore loads next step.

Where as normally, i have the path for my process script which would handle validation etc and then send them to a success screen or back to the form displaying errors.

 

I propose a few ideas that i could do to get around this, which i just wanted to get a bit of insight on, as to which way of going about this is the right one!!

 

My first idea would be to treat each step of the form as a separate form almost. Doing a form as i normally do, where the form is on one page, then the completed form is sent to a processing page, which processes the entries, sends user back to  the form page with errors if there are any, or if it is all ok, increase the 'stage number' in a session and then use a header to go to next page(the next step of the form. at the top of each page is a check to whether the stage number is the same as the step number of the form.

 

OR would i put all my validation in one page, with all the steps of the form as i have at the moment?

 

OR is there a way to send each step of the form to a process script, which then sends the user back to the original form displaying errors if there are any or then moves them to the next step??

 

Just a little confused with which method to do this, i dont want to start working on it and find out i have done it completely the wrong way!!

 

any help would be greatly received, thanks guys!!

 

Craig

[tora0515]

Did you ever find an answer to this?

 

I've been at it for a while too and can not figure it out.

 

Thanks,

 

Travis

[harristweed]

Hi, I'm working on the same thing, and I use Jquery form validation.

 

http://www.salebyowner.es/register_step_one.php

[doddsey_65]

jquery would work good for this. add an id to each of your forms(for simplification i am going with 1,2,3). add an include at the top to include the jquery file(lets call it form validation) and then create the js file(form_validation.js). in this file do something like:

 

jQuery(document).ready(function()
{
jQuery("#1").submit(function()
{
jQuery.post("your_process_file.php",{ 
forename:jQuery("#forename").val(),
surname:jQuery("#surname").val(),
email:jQuery("#email").val(),
address1:jQuery("#address1").val(),
address2:jQuery("#address2").val(),
town:jQuery("#town").val(),
county:jQuery("#county").val(),
postcode:jQuery("#postcode").val()
} ,function(data)
{ 
if (data == 1)
{
IF EVERY THING IS OK CONTINUE TO NEXT STEP
}
else
{ 
OR SHOW THE ERRORS
}
});

return false;
});

jQuery("#2").submit(function()
{
jQuery.post("your_process_file.php",{ 
userfile:jQuery("#userfile").val(),
fakeuserfile:jQuery("#fakeuserfile").val()
} ,function(data)
{ 
if (data == 1)
{
IF EVERY THING IS OK CONTINUE TO NEXT STEP
}
else
{ 
OR SHOW THE ERRORS
}
});

return false;
});
});

 

and then in your_process_file.php add the validation. if the validation checks out ok in this file then echo 1 to show its ok.

 

$error = '';

if(strlen($_POST['username'] >= 
{
$error = '';
}
else
{
if (empty($error)
{
$error = 'Wrong Length Username';
}
}
if (empty($error)
{
echo '1';
}
else
{
echo $error;
}

 

[l4nc3r]

No need to complicate things with javascript, or even with posting to a separate script and then redirecting back.

 

The way I usually do form validation is I have the action set to the same page and if the submit var is set I include the form validation file.

 

So the way you would do it with multiple pages is, if the submit button is set, include the form validation file.  If there is an error, do nothing and display the errors on the page.  If there is no error, store the values in a session var and redirect to the next form page.  So..

 

if(isset($_POST['submit'])) {
     include('formValidation.php');

     if(!isset($error)) {
          $_SESSION['form'] = $_POST['value'];

          header('formPage2.php');
     }
}

if(isset($error)) {
     echo $error;
}

// print out form