Validate form fields in sequences

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>

Answers


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
  }
}

Well, since you have tagged your question with jQuery, why not actualy use it and let jquery handle all platform specific issues.

function toggleDiv(id,flagit) {
    if( flagit ) {
       $("#"+id).show();
    } else {
       $("#"+id).hide();
    }
}

Let me know if this works.


Need Your Help

Kendo Chart set skip after load using Angular

angularjs kendo-ui kendo-dataviz

Im using Angular Kendo - Im not sure if thats really relevant only to say its not as 'simple' as calling refresh. - I have two scope variables one is the Kendo DataSource the other is the Kendo Chart