需要验证此表单的想法和解决方案

Question

我有一个表单，我需要以最简单和最安全的方式验证它。 这是一个分类广告网站！

现在，我有几个类别可供用户选择，然后使用 javascript 我根据选择的类别显示子类别。 子类别实际上是 DIV:s，它们的显示属性设置为“无”或“块”。 这是根据所选类别隐藏和显示两个子类别（DIVS）的js：

(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';

这是很长的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>

现在想象其中的 30 个子类别！

如您所见，DIV 顶部有两个单选按钮。如果'sell'被选中，那么所有选项都必须填写，但是如果'buy'被选中，那么什么都不需要填写。这是第一个条件！

第二个条件是检查每个 SELECTS/INPUTS/CHECKBOXES 或任何存在，以确保选择了一个值。这是第二个条件。

我需要验证这些最简单的方法，而不是编写数百个 if 语句或 switch 语句。

所以再次总结一下，当用户在类别下拉列表中选择一个类别时，会为该主类别显示一个子类别。 在这个子类别中，有两个收音机。如果选中“购买”，则无需验证。如果选中了“sell”，则确保元素具有正确的值，即选择的东西。

希望我的解释足够好，谢谢...

如果您需要更多信息，请告诉我！

Answer 1

首先确保每个选择中的选定选项都有一个空白值。

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

然后：

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

我认为这是最简单的方法。