Im so close now. Please someone end the suffering :P
The form now checks if all fields are correct in step1 and if not it displays the error prompt. however when you click ok to that it continues to hide step1/show step2 before you get the chance to correct the mistake.
Here is the code:
(Im just working on getting step1 to work first.)
<script language="JavaScript">
//check form Step1 //
function formCheck(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("name", "email");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Full Name", "Valid Email Address");
// 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;
}
}
</script>
<script type=text/javascript>//<![CDATA[
// Multi Page form //
var sections = new Array('stepOne', 'stepTwo', 'stepThree');
function init() {
show('stepOne');
document.forms['contactform'].elements['name'].focus();
}
function show(section) {
for (var i = 0; i < sections.length; i++) {
if (sections[i] == section) {
document.getElementById(sections[i]).style.display = 'block';
} else {
document.getElementById(sections[i]).style.display = 'none';
}
}
}
//]]></script>
</head>
<body onload=init();>
<H1>Contact Form</H1>
<FORM id=contactform action="">
<DIV id=stepOne>
<H2>Step 1 </H2>
<LABEL>Your Name?</LABEL> <INPUT name="name" class="memorize" id=name tabIndex="1">
<LABEL for=email>Your e-mail address?</LABEL> <INPUT name="email" class="memorize" id=email tabIndex="2">
<LABEL for=subject>Your reason for contacting us?</LABEL>
<SELECT name="reason" size=1 class="memorize" id=reason tabIndex="3">
<OPTION value=--- selected>Please choose</OPTION>
<OPTION value="Bad Link">I found a bad link.</OPTION> <OPTION
value="Problems with Site">I'm having problems with the Site</OPTION> <OPTION
value="Just Hello">I'm just saying hello.</OPTION> <OPTION
value="Work Proposal">I'd like to give you a job.</OPTION></SELECT>
<br>
<P><a href="#stepTwo" tabIndex="4" onclick="formCheck(contactform);return show('stepTwo');"><img src="images/nextstep2.gif" width="320" height="29" border="0"></a></P>
</DIV>
<DIV id=stepTwo>
<H2>Step 2 </H2>
<LABEL for=occupation>Your Occupation?</LABEL>
<INPUT class="memorize" id=occupation tabIndex="5"> <LABEL for=education>Level of
Education?</LABEL> <INPUT class="memorize" id=education tabIndex=6> <LABEL
for=preference>Preferred Method of Contact?</LABEL> <SELECT id=preference
tabIndex="7" size=1> <OPTION value=--- selected>Please choose</OPTION> <OPTION
value="Prefer Phone">Phone</OPTION> <OPTION
value="Prefer E-mail">E-mail</OPTION> <OPTION value="Prefer Postal">Postal
Mail</OPTION> <OPTION value="Prefer None">I prefer not to be
contacted</OPTION></SELECT>
<br>
<P><a href="#stepOne" tabIndex="7" onclick="show('stepOne');return false;"><img src="images/backstep1.gif" width="150" height="29" border="0"></a> <a href="#stepThree" tabIndex="8" onclick="show('stepThree');return false;" onkeypress="show('stepThree'); return false;"><img src="images/nextstep3.gif" width="160" height="29" border="0"></a></P>
</DIV>
<DIV id=stepThree>
<H2>Step 3</H2>
<LABEL for=occupation>Hobbies?</LABEL>
<INPUT id=occupation tabIndex="8">
<LABEL for=education>Favorite Color ?</LABEL>
<INPUT id=education tabIndex="9">
<LABEL for=preference>Preferred Method of Contact?</LABEL>
<SELECT size=1 id=preference
tabIndex="10">
<OPTION value=--- selected>Please choose</OPTION>
<OPTION
value="Prefer Phone">Phone</OPTION>
<OPTION
value="Prefer E-mail">E-mail</OPTION>
<OPTION value="Prefer Postal">Postal Mail</OPTION>
<OPTION value="Prefer None">I prefer not to be contacted</OPTION>
</SELECT>
<br>
<p><a href="#stepTwo" tabindex="11" onclick="show('stepTwo');return false;"><img src="images/backstep2.gif" width="150" height="29" border="0"></a> <input type="image" src="images/submit.gif" width="160" height="29" border="0" alt="Submit Form" tabindex="12"></p>
</DIV>
</FORM>
</body>
Regards,
Fiasst