Question

I have a form which I need to validate the easiest and most safe way.
This is for a classifieds website!

Now, I have several categories which the user may chose from, and then with javascript I display subcategories depending on which category is chosen.
The subcategories are actually DIV:s which have their display property set to either ‘none’ or ‘block’.
Here is the js for hiding and displaying two of the sub-categories (DIVS) depending on the chosen category:

(category=="Bilar")?byId("annonsera_carssub").style.display='block' :  byId("annonsera_carssub").style.display='none';
(category=="Motorcyklar")?byId("annonsera_mcsub").style.display='block' :  byId("annonsera_mcsub").style.display='none';

And here is the long annonsera_carssub DIV:

<div class="annonsera_carssub" id="annonsera_carssub">
              <input type="radio" name="annonsera_cars_action" id="annonsera_cars_sell" value="Säljes" <?php if(@$_POST['annonsera_cars_action']=='Säljes' || !isset($_POST['annonsera_cars_action'])){echo "Checked";}?> onClick="price_action(this.value, 'cars'); byId('xdsp').value=0;">
              <font face="Arial, Helvetica, sans-serif" style="font-size:14px; font-weight:bold;">Säljes</font>

              <input type="radio" name="annonsera_cars_action" id="annonsera_cars_buy" value="Köpes" <?php if(@$_POST['annonsera_cars_action']=='Köpes'){echo "Checked";}?> onClick="price_action(this.value, 'cars'); byId('xdsp').value='cars';">
              <font face="Arial, Helvetica, sans-serif" style="font-size:14px; font-weight:bold;">Köpes</font>

              <br><br>

              <div id="cars">
              <select name="annonsera_caryear" id="annonsera_caryear" style="width: 150px; margin-bottom: 5px;">

                 <option id="Välj Årsmodell" value="Välj Årsmodell" class="nav_option_main" selected>-- Välj Årsmodell --</option>

                 <option id="0" value="0">Äldre än 1980</option>
                 <option id="1980" value="1980">1980</option>
                 <option id="1981" value="1981">1981</option>
                 <option id="1982" value="1982">1982</option>
                 <option id="1983" value="1983">1983</option>
                 <option id="1984" value="1984">1984</option>
                 <option id="1985" value="1985">1985</option>
                 <option id="1986" value="1986">1986</option>
                 <option id="1987" value="1987">1987</option>
                 <option id="1988" value="1988">1988</option>
                 <option id="1989" value="1989">1989</option>
                 <option id="1990" value="1990">1990</option>
                 <option id="1991" value="1991">1991</option>
                 <option id="1992" value="1992">1992</option>
                 <option id="1993" value="1993">1993</option>
                 <option id="1994" value="1994">1994</option>
                 <option id="1995" value="1995">1995</option>
                 <option id="1996" value="1996">1996</option>
                 <option id="1997" value="1997">1997</option>
                 <option id="1998" value="1998">1998</option>
                 <option id="1999" value="1999">1999</option>
                 <option id="2000" value="2000">2000</option>
                 <option id="2001" value="2001">2001</option>
                 <option id="2002" value="2002">2002</option>
                 <option id="2003" value="2003">2003</option>
                 <option id="2004" value="2004">2004</option>
                 <option id="2005" value="2005">2005</option>
                 <option id="2006" value="2006">2006</option>
                 <option id="2007" value="2007">2007</option>
                 <option id="2008" value="2008">2008</option>
                 <option id="2009" value="2009">2009</option>
                 <option id="2010" value="2010">2010</option>
              </select>


              <select name="annonsera_cargrbx" id="annonsera_cargrbx" style="width: 160px; margin-bottom: 5px; margin-left:20px;">

                <option id="Välj Växellåda" value="Välj Växellåda" class="nav_option_main" selected>-- Välj Växellåda --</option>
                <option id="Manuell" value="Manuell">Manuell</option>
                <option id="Automat" value="Automat">Automat</option>

              </select>

            <br>


              <select name="annonsera_carsmile" id="annonsera_carsmile" style="width: 150px; margin-bottom: 5px;">

                <option id="Välj Miltal" value="Välj Miltal" class="nav_option_main" selected>-- Välj Miltal --</option>
                <option id="0" value="0">Mindre än 500</option>
                <option id="500" value="500">500</option>
                <option id="1000" value="1000">1 000</option>
                <option id="1500" value="1500">1 500</option>
                <option id="2000" value="2000">2 000</option>
                <option id="2500" value="2500">2 500</option>
                <option id="3000" value="3000">3 000</option>
                <option id="3500" value="3500">3 500</option>
                <option id="4000" value="4000">4 000</option>
                <option id="4500" value="4500">4 500</option>
                <option id="5000" value="5000">5 000</option>
                <option id="5500" value="5500">5 500</option>
                <option id="6000" value="6000">6 000</option>
                <option id="6500" value="6500">6 500</option>
                <option id="7000" value="7000">7 000</option>
                <option id="7500" value="7500">7 500</option>
                <option id="8000" value="8000">8 000</option>
                <option id="8500" value="8500">8 500</option>
                <option id="9000" value="9000">9 000</option>
                <option id="9500" value="9500">9 500</option>
                <option id="10000" value="10000">10 000</option>
                <option id="11000" value="11000">11 000</option>
                <option id="12000" value="12000">12 000</option>
                <option id="13000" value="13000">13 000</option>
                <option id="14000" value="14000">14 000</option>
                <option id="15000" value="15000">15 000</option>
                <option id="16000" value="16000">16 000</option>
                <option id="17000" value="17000">17 000</option>
                <option id="18000" value="18000">18 000</option>
                <option id="19000" value="19000">19 000</option>
                <option id="20000" value="20000">20 000</option>
                <option id="22500" value="22500">22 500</option>
                <option id="25000" value="25000">25 000</option>
                <option id="30000" value="30000">30 000</option>
                <option id="35000" value="35000">35 000</option>
                <option id="40000" value="40000">40 000</option>
                <option id="45000" value="45000">45 000</option>
                <option id="50000" value="50000">50 000</option>
                <option id="1000000" value="1000000">Över 50 000</option>

              </select>

              <select name="annonsera_carfuel" id="annonsera_carfuel" style="width: 160px; margin-bottom: 5px; margin-left:20px;">

                <option id="Välj Drivmedel" value="Välj Drivmedel" class="nav_option_main" selected>-- Välj Drivmedel --</option>
                <option id="Bensin" value="Bensin">Bensin</option>
                <option id="Diesel" value="Diesel">Diesel</option>
                <option id="Miljöbränsle" value="Miljöbränsle">Miljöbränsle</option>
                <option id="EL" value="EL">EL</option>

              </select>

          <br> 

              <input type="checkbox" name="annonsera_carschangeto" id="annonsera_carschangeto" value="1" <?php if(@$_POST['annonsera_carschangeto']=='1'){echo "Checked";}?> style="margin-left:0px; padding-left:0px;">
              <font style="font-size:12px; font-weight:normal;">Även intresserad av byten ( Frivilligt )</font>

              </div>
           </div>

Now imagine 30 of these sub-categories!

As you can see there are two radio buttons at top of the DIV. If the ‘sell’ is checked, then all options MUST be filled in, but if the ‘buy’ is checked, then nothing needs to be filled in. Thats the first condition!

The second condition is to check each of the SELECTS/INPUTS/CHECKBOXES or whatever there is, to make sure that a value is chosen. Thats the second condition.

I need to validate these the easiest way, and not have to write hundreds of if statements or switch statements.

So to sum it up again, when user choses a category in a category drop-down list, then a sub-category is displayed for that main category.
Inside this sub-category, there are two radios. If ‘buy’ is checked, then no validation required. If ‘sell’ checked, then make sure elements have a proper value, ie something selected.

Hope I have explained good enough, thanks…

If you need more input, let me know!

Answer 1

First of all make sure that the selected option in each select has a blank value.

<option id="Välj Årsmodell" value="" class="nav_option_main" selected>-- Välj Årsmodell --</option>

Then:

switch(category)
{
    case "Bilar": validate("annonsera_carssub"); //Switch the value of the category and call the validate function with the corresponding div id
    break;
    ...
}
function validate(divid)
{
    var container=byId(divid), //Get the div
    inputs=container.getElementsByTagName("input"), //Get every inpuy and select elements
    selects=container.getElementsByTagName("select");

    if(inputs[1].checked) return true; //If the second radio (buy) is checked there's no need to validate
    for(var i=2;i<inputs.length;i++) //Validate input fields. Skip first 2 radios.
        if(!inputs[i].value) {
             alert("Every field must be compiled");
             return false;
        }

    for(var i=2;i<selects.length;i++) //Validate select fields
        if(!selects[i].value) {
             alert("Every field must be compiled");
             return false;
        }
    return true;
}

I think this is the simplest way.