Question

I want to validate a form but I want to have 9 different functions to validate the form. Which validation function gets used should be determined by a slider on the screen, or rather by the value in the span “range” which is controlled by the slider)

I can validate the form fine if I’m just using one function to do so with the below:

<script>
    function validateFormMethod1() {
        // do my validation stuff here
    }
</script>

<form method="post" action="whatevermailscript.php"name="GuestInfo" onSubmit="return validateFormMethod1();">
    <input type="submit" value="Send" name="submit" />
    <span>Guests</span>
    <span id="range">1</span>
    <input id="scaleSlider" type="range" value="1" min="1"  max="9" step="1" onchange="showValue(this.value) ; showOrHide(this.value)"/>

But how can I add to this this so that if range.value==2 validateFormMethod2 would get called instead of validateFormMethod1?

---

Update 3:

<script>


   function validateFormMethod0() {

    }  

    function validateFormMethod1() {
       window.alert("Method 1");
       return false;
    }

    function validateFormMethod2() {
        window.alert("Method 2");
        return false;
    }


    function validateFormMethod3() {
      window.alert("Method 3.");
      return false;
    }


    function validateFormMethod4() {
       window.alert("Method 4.");
       return true;
    }





    var validationFunctions = [
    validateFormMethod0,
   validateFormMethod1,
   validateFormMethod2,
   validateFormMethod3,
    validateFormMethod4

];
    function validateForm() {    

     var range = document.getElementById("range");

    validationFunctions[range.innerHTML]();
}


</script>

Still cant quite get this working as suggested but this serves my purpose:

 function validateForm()
{


 var range = document.getElementById("range");


   if (range.innerHTML == "1")
    {
        // do my validation stuff for case one here


    }


   if (range.innerHTML == "2")
    {
        // do my validation stuff for case two here


    }

} 

Answer 1

Use an array of functions.

var validationFunctions = [
   validateFormMethod1,
   validateFormMethod2,
   validateFormMethod3,
   ....
];

function validateForm() {        
    validationFunctions[range.value]();
}