Javascript + HTML如何驗證多維選擇對象

Question

我想驗證所有材質下拉列表。但我的系統上出現frm.material is undefined錯誤。

HTML標記

<form name="testFrm" id="textFrm">Material 1 
    <select name="material[1][]" class="Form_dropdown material_dd"> 
     <option value="-1">Select</option> 
     <option value="2">Fine Silk</option> 
     <option value="10">NZ Wool</option> 
     <option value="3">Thick Silk</option> 
     <option value="1">Titbetan Wool</option> 
    </select> 
    <select name="material[1][]" class="Form_dropdown material_dd"> 
     <option value="-1">Select</option> 
     <option value="2">Fine Silk</option> 
     <option value="10">NZ Wool</option> 
     <option value="3">Thick Silk</option> 
     <option value="1">Titbetan Wool</option> 
    </select> 
    <br />Material 2 
    <select name="material[2][]" class="Form_dropdown material_dd"> 
     <option value="-1">Select</option> 
     <option value="2">Fine Silk</option> 
     <option value="10">NZ Wool</option> 
     <option value="3">Thick Silk</option> 
     <option value="1">Titbetan Wool</option> 
    </select> 
    <br />Material 3 
    <select name="material[3][]" class="Form_dropdown material_dd"> 
     <option value="-1">Select</option> 
     <option value="2">Fine Silk</option> 
     <option value="10">NZ Wool</option> 
     <option value="3">Thick Silk</option> 
     <option value="1">Titbetan Wool</option> 
    </select> 
    <select name="material[3][]" class="Form_dropdown material_dd"> 
     <option value="-1">Select</option> 
     <option value="2">Fine Silk</option> 
     <option value="10">NZ Wool</option> 
     <option value="3">Thick Silk</option> 
     <option value="1">Titbetan Wool</option> 
    </select> 
    <select name="material[3][]" class="Form_dropdown material_dd"> 
     <option value="-1">Select</option> 
     <option value="2">Fine Silk</option> 
     <option value="10">NZ Wool</option> 
     <option value="3">Thick Silk</option> 
     <option value="1">Titbetan Wool</option> 
    </select> 
    <br /> 
    <input type="button" onclick="return checkForm()" value="validate" /> 
</form> 

我創建了一個的jsfiddle，你可以在這裏找到http://jsfiddle.net/QgghZ/12/

第一選擇選項的值是<option value="-1">Select</option>，需要檢查是否有任何的下拉列表中沒有設置選擇。

我需要一個js函數來驗證這些下拉列表。

謝謝大家的支持提前

編輯

謝謝大家固定的jsfiddle的問題，但我需要它可以遍歷這些下拉菜單驗證功能。

編輯

如果我用下面的JS它顯示的名字

var boxes = document.getElementsByTagName('select'); 
    for(i = 0; i < boxes.length; i++){ 

      console.log(boxes[i].name); 

    } 

// Output: material[1][], material[1][], material[2][] .... someotherDropdowns 

ANSWER

這裏是我得到了所有的值

function checkForm(){ 
    var e = false; 
    var boxes = document.getElementsByClassName('material_dd'); 
    for(i = 0; i < boxes.length; i++){ 
     if(boxes[i].value == '-1'){ 
      e = true; 
     }   
    } 
    if(e){ 
     alert('Please select a material'); 
     return false; 
    } 

}

因此，即使有其他選擇框，也只會檢查材料下拉列表。我可以迭代該值來查看是否有-1。

Answer 1

除了表單名稱上的拼寫錯誤，您不會通過frm.material獲得選擇的數組，它們不會像這樣分組，因爲當您收到表單時在你的後端腳本中。你可以用frm["material[1][]"]之類的東西來訪問它們，但是我可以使用document.getElementsByClassName('material_dd')之類的其他方法，這樣你就可以知道有多少元素了。

Answer 2

你的jsfiddle設置的設定是錯誤的，以下是更新的鏈接：

<input type="button" onClick="checkForm()" value="validate" /> 

http://jsfiddle.net/QgghZ/7/

而且你有更多形式的標籤爲：

<form name="testFrm" id="textFrm">Material 1 

，然後在腳本電話：

frm = document.getElementById("testFrm"); 

沒有與testFrm

的ID

Answer 3

我不明白爲什麼它不工作沒有形式，但我改變你的代碼少了，現在它的工作

[jsFiddle][1] 


    [1]: http://jsfiddle.net/QgghZ/ 

Answer 4

更換frm = document.getElementById("testFrm");

與frm = document.getElementById("textFrm");