Question

我有以下HTML和Javascript，但无效：

<select id="shirtinfo[0]" name="shirtinfo[0]">
    <option value="">Confederation</option>
    <option value="6770">Europe (UEFA)</option>
    <option value="16272">South America (CONMEBOL)</option>
    <option value="21684">Africa (CAF)</option>
    <option value="21771">North &amp; Central America (CONCACAF)</option>
    <option value="18091">Asia (AFC)</option>
    <option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
    <option value="">Season</option>
    <option value="2013">2013</option>
    ...
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="validate()" />

<script>
function validate() {
    if  (document.querySelectorAll("#shirtinfo[0], #shirtinfo[1], #shirtinfo[2], #shirtinfo[3], #shirtinfo[4], #season, #style, #status").value)
        {
            alert("[[Please enter the mandatory fields]]");
            return false;
        }
}
</script>

所有第一个选项值都为空，只有标题，如果未选择任何选项，将显示警报。因此，用户需要从列表中选择至少不是第一个选项的其他内容。

我该怎么做？

Answer 1

根据需要更改以下代码。只需遍历适当的元素，如果select的值为空，则根据需要中断和处理。

function validate() {
    "use strict";
    var selectEls = document.querySelectorAll('select'),
        numSelects = selectEls.length;

    for(var x=0;x<numSelects;x++) {
        if (selectEls[x].value === '') {
            alert('[[Please enter the mandatory fields]]');
            return false;
        }
    }

    // If the code execution reaches this point, all the tests pass
    // ...
}

代码可以进行改进，例如，如果你想继续遍历所有元素，并突出显示问题select元素，但这超出了这个问题的范围

Answer 2

试试这个：同样在这个小提琴中：http://jsfiddle.net/9f76X/

<select id="shirtinfo" name="shirtinfo[0]">
    <option value="">Confederation</option>
    <option value="6770">Europe (UEFA)</option>
    <option value="16272">South America (CONMEBOL)</option>
    <option value="21684">Africa (CAF)</option>
    <option value="21771">North &amp; Central America (CONCACAF)</option>
    <option value="18091">Asia (AFC)</option>
    <option value="19193">Oceania (OFC)</option>
</select>
...
<select id="season" name="season">
    <option value="">Season</option>
    <option value="test">test</option>
</select>
...
<input id="submit" type="submit" value="[[Save:raw]]" onclick="return validate();" />

<script type="text/javascript">
    function validate() {
    var controls, cnt, showAlert;
    controls = document.querySelectorAll("#shirtinfo,#season");

    for (cnt=0;cnt < controls.length; cnt++)
    {
        if (!controls[cnt].value) 
        {
            showAlert = true;
            break;
        }
    }

    if (showAlert) {
        alert("[[Please enter the mandatory fields]]");
    }
    return !showAlert;
}

</script>

如果多个选项值为空，如何显示警报

2 个答案: