PDA

View Full Version : preventing user to proceed with empty fields



pgh06
01-27-2013, 09:19 PM
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:


<!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:


/*
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;




/*
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();
}