Field validation when using multipage forms

Hey guys

Hopefully this hasn't already been answered millions of times, if it has please direct me to the answer as I have spent an hour or so looking.

I've successfully created a multipage form thanks to some reading and experimentation but have overlooked a factor I wish to implement in my form. I am currently using

<input type=button
onclick=" collapseElem('mainForm_1'); expandElem('mainForm_2');"
class="mainForm" value="Next Step" />  

to skip between pages on my form, however. I would like users to enter information in specific fields but would want this to be done before proceeding to the next step if possible. On the last page of my form I have a submit button and say for example a user hasn't entered anything the form currently does nothing. I would like it to either return to the empty field or as mentioned would like my "next" buttons to stop fields being missed. Is this achievable?

Thanks in advance, I hope this makes sense.

Hi Chapter,

I understand what you want, I haven't seen it answered here before so I think that you are going to have to write your own code. At present the validation triggers on onBlur I think so it will work OK if the user enters the field but not if they skip it.

Bob

Hi Chapter, Bob,

Check this post :

http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=4&t=8114&start=0&st=0&sk=t&sd=a

Cheers,
Max

Hi Max,

Good memory :-) I missed or forgot that one . . .

Bob

Thanks to both of you for the speedy response, will give it a shot.

Hi Bob,

yes, its one of those key things when multi page forms are done and many want it, I used it many times myself😉

Regards,
Max

I'm finding that the validation on fields is screwing up, if I go to my form and just click next page I assume that I will see all of the error messages under each field where validation is applied but instead I get random issues.

- If I use

required validate-selection

on drop downs it works, but if I use just

validate-selection

it just highlights the drop down with no message.
- Some fields that have got either

required validate-number

or

validate-number

do not show an error message at all.

Would anyone mind taking a look at my code to see if there is anything noticable that i'm missing, I've used code from all of the threads or tutorials from this site.

Form HTML

<?php
global $mosConfig_live_site;
$folder = $mosConfig_live_site.'/components/com_chronocontact';
echo "<script src='$folder/prototype.js' type='text/javascript'></script>";
echo "<script src='$folder/validation.js' type='text/javascript'></script>";
?>

<!-- begin page one -->
<div  id="mainForm_1"> 

<div  class="form_item"><div class="form_element cf_heading"><h1 id="" class="cf_text">Mortgage Details</h1></div><div class="clear"> </div></div>
<div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Mortgage Type</label><select class="cf_inputbox required validate-selection" id="select_1" size="1" name="select_1">
<option value="">Please Select</option>
<option value="Re-Mortgage">Re-Mortgage</option>
<option value="First Time Buyer">First Time Buyer</option>
<option value="Buy-To-Let">Buy-To-Let</option>
<option value="New Build Mortgage">New Build Mortgage</option>
</select></div><div class="clear"> </div></div>
<div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Loan Amount Required (£)</label><select class="cf_inputbox required validate-selection" id="select_2" size="1" name="select_2">
<option value="">Please Select</option>
<option value="0-40,000">0-40,000</option>
<option value="40,001-60,000">40,001-60,000</option>
<option value="60,001-80,000">60,001-80,000</option>
<option value="80,001-100,000">80,001-100,000</option>
<option value="100,001-120,000">100,001-120,000</option>
<option value="120,001-140,000">120,001-140,000</option>
<option value="140,001-160,000">140,001-160,000</option>
<option value="160,001-180,000">160,001-180,000</option>
<option value="180,001-200,000">180,001-200,000</option>
<option value="200,001-240,000">200,001-240,000</option>
<option value="240,001-280,000">240,001-280,000</option>
<option value="280,001+">280,001+</option>
</select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Property Value (£)</label><input class="cf_inputbox required" maxlength="150" size="30" id="text_3" name="text_3" type="text"></div><div class="clear"> </div></div>

        <!-- next page button -->
        
<input type=button onclick=" if(!valid.validate()) Event.stop(ev); collapseElem('mainForm_1'); expandElem('mainForm_2');" 
class="mainForm" value="Next Page" />
        
</div>

<!-- begin page two -->
<div id="mainForm_2">   

<div  class="form_item"><div class="form_element cf_heading"><h1 id="" class="cf_text">Personal Details</h1></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Title</label><select class="cf_inputbox validate-selection" id="select_1" size="1" name="select_1">
<option value="">Please Select</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Forename</label><input class="cf_inputbox required validate-alpha" maxlength="150" size="30" id="text_2" name="text_2" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Surname</label><input class="cf_inputbox required validate-alpha" maxlength="150" size="30" id="text_3" name="text_3" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Tel</label><input class="cf_inputbox required vaildate-digits" maxlength="150" size="30" id="text_4" name="text_4" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textarea"><label class="cf_label">Address (optional)</label><textarea class="cf_inputbox" rows="3" id="text_6" cols="30" name="text_6"></textarea></div><div class="clear"> </div></div>

        <!-- next page button -->

<input type=button onclick=" if(!valid.validate()) Event.stop(ev) ; collapseElem('mainForm_2') ; expandElem('mainForm_3') ;" 
class="mainForm" value="Next Page" />
        
</div>

<!-- begin page three -->
<div id="mainForm_3">

<div  class="form_item"><div class="form_element cf_heading"><h1 id="" class="cf_text">Employment Details</h1></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_dropdown"><label class="cf_label">Employment Status</label><select class="cf_inputbox validate-selection" id="select_1" size="1" name="select_1">
<option value="">Please Select</option>
<option value="Employed">Employed</option>
<option value="Unemployed">Unemployed</option>
<option value="Self-Employed/Contract">Self-Employed/Contract</option>
<option value="Retired">Retired</option>
</select></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Salary (£)</label><input class="cf_inputbox required vaildate-digits" maxlength="150" size="30" id="text_2" name="text_2" type="text"></div><div class="clear"> </div></div><div  class="form_item"><div class="form_element cf_textbox"><label class="cf_label">Second applicant Salary (£)</label><input class="cf_inputbox vaildate-digits" maxlength="150" size="30" id="text_3" name="text_3" type="text"></div><div class="clear"> </div></div>

        <!-- finish button -->
        
<div  class="form_item"><div class="form_element cf_button"><input value="Submit" name="undefined" type="submit"></div><div class="clear"> </div></div>
        
</div>

<script type="text/javascript" >
new Validation(this);
  function formCallback(result, form) {
    window.status = "validation callback for form '" + form.id + "': result = " + result;
}
var valid = new Validation('mortgage_form', {immediate : true, onFormValidate : formCallback});

</script>

Form JavaScript

             // collapse individual elements
      function collapseElem(obj)
         {
             var el = document.getElementById(obj);
             el.style.display = 'none';
         }


             // expand next element
      function expandElem(obj)
         {
             var el = document.getElementById(obj);
             el.style.display = '';
         }

           
             // collapse all elements, except the first one
       function collapseAll()
             {
       // change the following line to reflect the number of pages
                 var numFormPages = 4;

                 for(i=2; i <= numFormPages; i++)
                 {
                     currPageId = ('mainForm_' + i);
                     collapseElem(currPageId);
                 }
             }

             // run the collapseAll function on page load
    window.onload = collapseAll;

Thanks

Hi Chapter,

We can't see what validation you have set from the code you've posted. Please take a form backup from the form manager and post that if you want us to look at the validation code.

Bob

Here it is
[attachment=0]mortgageform.rar[/attachment]
Thanks

Hi Chapter,

I see you have form code from the wizard and using Joomla 1.0 code and the Form HTML is really missed, lets start with a new clean simple form then you can fix your code later, show me how do you make a multipage form, that thread I pointed to assumes that you have a multipage form using multiple divs inside the form HTML code and you hide one and show the other when buttons are clicked.

Cheers,
Max