I am trying to create a step by step application but with all the forms linked to one main .php file to send off to a database. Such as:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script src="js/scripts.js" type="text/javascript"></script>
<script src="js/tabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/tabs.css" />


</head>

<body>
<div id="tabs">
<ul>
     <li><a href="#" rel="html/form1.html" class="selected"  onclick="loadit(this)">Step 1</a></li>
     <li><a href="#" rel="html/form2.html" onClick="loadit(this)">Step 2</a></li>
     <li><a href="#" rel="html/form3.html" onClick="loadit(this)">Step 3</a></li>
     <li><a href="#" rel="html/form4.html" onClick="loadit(this)">Step 4</a></li>
     <li><a href="#" rel="html/form5.html" onClick="loadit(this)">Step 5 & Submit</a></li>
</ul>
<iframe id="container"></iframe>
</div>

</body>
</html>
I would like the user to only be able to advance to next step if the fields are completed, but right now, the user can see every step and just submit each form on .php page. How can I achieve this?

Here is JS:

Code:
/*
 Tabs
 (c) 2009 By Xul.fr
 Freeware
*/


function loadit( element)
{
	var container = document.getElementById('container');
	container.src=element.rel;

	var tabs=document.getElementById('tabs').getElementsByTagName("a");
	for (var i=0; i < tabs.length; i++)
	{
		if(tabs[i].rel == element.rel) 
			tabs[i].className="selected";
		else
			tabs[i].className="";
	}
}

function startit()
{
	var tabs=document.getElementById('tabs').getElementsByTagName("a");
	var container = document.getElementById('container');
	container.src = tabs[0].rel;
}

window.onload=startit;
Code:
/*
 Form Validation
*/

function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("student_type", "first_name", "last_name", "father_first_name", "father_last_name", "mother_first_name", "mother_last_name", "language", "gender", "language_assistance", "date_of_birth", "street_name", "town_city", "country", "postalcode_zipcode", "phone_area_code", "phone_number", "email", "custodian_guardian","canadian_street_number", "canadian_town_city", "canadian_country", "canadian_postalcode_zipcode", "homestay_provider", "canadian_phone_area_code", "canadian_phone_number", "homestay_email", "school_year_request", "grade_request", "semester_request", "school_request", "documents");
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("Student Type", "Your First Name", "Your Last Name", "Father's First Name", "Father's Last Name", "Mother's First Name", "Mother's Last Name", "Language", "Gender", "Language Assistance", "Date Of Birth", "Street Name", "Town/City", "Country", "Postal/Zip Code", "Phone Area Code", "Phone Number", "E-mail Address", "Custodian/Guardian", "Canadian Street Number", "Town/City", "Postal/Zip Code", "Country", "Homestay Provider", "Phone Area Code", "Phone Number", "Homestay E-mail Address", "Requested School Year", "Requested Grade Year", "Requested Semester", "School Request", "Documents");
	// dialog message
	var alertMsg = "Please complete the following fields:\n";

	var l_Msg = alertMsg.length;

	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}

	if (alertMsg.length == l_Msg){
		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}
// -->





/*
 Form Validation
*/

function validateForm()
{
var x=document.forms["internation_student_form"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}



/*
 Caps Lock
*/
function caps(id){
    document.getElementById(id).value = document.getElementById(id).value.toUpperCase();
}