Question

I have a multi-step order form built in this manner:

Step 1: Choose category via radio button

The “Next” button is just an image that has an onclick function hides the current div with the radio buttons, and displays a new div with the next step in the process.

Step 2: Textarea, checkbox -> Dynamic price

Contains a textarea, a dynamic price, and four checkboxes. The price changes depending on the number of characters in the textarea and the choices in the checkboxes. JQuery script is used in order to do that. Again, the “Next” button is just an image that upon activating the onclick function hides the current div, and displays the div containing the next step in the form.

Step 3: Personal Data

And here is my problem. Here where the user inserts name, email and so on. The “Next” button is again just an image that upon activating the onclick function hides the current div and displays the div containing the next step. How do i make the form fields in this step required in order to allow the user to advance to the next step. The code i have for hiding and showing the divs is as follows:

<script type="text/javascript">
    function toggleDiv(id, flagit) {
        if (flagit == "1") {
            if (document.layers) document.layers[''+id+''].visibility = "show"
            else if (document.all) document.all[''+id+''].style.visibility = "visible"
            else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
        }
        else`if (flagit == "0") {
            if (document.layers) document.layers[''+id+''].visibility = "hide"
            else if (document.all) document.all[''+id+''].style.visibility = "hidden"
            else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"`
        }
    }
    //-->
</script>

Answer 1

That is a horrible (and wrong) piece of old code.

here is an update that actually still handles Netscape4 (the layers part)

You need to show me the rest of the script where you toggle. You need to add validation to
THAT part, not the toggle.

For example, using

<form onsubmit="return validate(this)">

and

<input type="image" src="next.png" />

you can do this (plain JavaScript, the show and hide in jQuery is shown elsewhere on the page):

var currentStep=1;
function toggleDiv(id,flagit) {
  if (document.getElementById) document.getElementById(id).style.visibility = (flagit)?"visible":"hidden";
  else if (document.all) document.all(id).style.visibility = (flagit)?"visible":"hidden";
  else if (document.layers) document.layers[id].visibility = (flagit)?"show":"hide";
}
function validate(theForm) {
  if (currentStep == 1)  {
    if (theForm.category.value....) {
      alert("Error in category");
      return false;
    }
    currentStep++;
    toggleDiv("part1",0);
    toggleDiv("part2",1);
    return false; // do not submit
  }
  if (currentStep == 2)  {
    if (theForm.price.value....) {
      alert("Error in price");
      return false
    }
    currentStep++;
    toggleDiv("part2",0);
    toggleDiv("part3",1);
    return false; // do not submit
  }
  if (currentStep == 3)  {
    if (theForm.name.value....) {
      alert("Error in name");
      return false
    }
    return true; // submit
  }
}