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

回答

这是我获得所有值的方法

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

替换frm = document.getElementById("testFrm");

frm = document.getElementById("textFrm");

Answer 3

我不明白为什么它不起作用，但是我稍微更改了您的代码，现在它可以工作了

[jsFiddle][1]


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

Answer 4

你的 jsfiddle 设置错误，下面是更新的链接：

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

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

还有更多你的表单标签为：

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

然后在你调用的脚本中：

 frm = document.getElementById("testFrm");

没有id为testFrm的Form