0

次の 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>

最初のオプションの値はすべて空で、タイトルだけです。オプションのいずれかが選択されていない場合、アラートが表示されます。したがって、ユーザーはリストから少なくとも最初のオプションではない何かを選択する必要があります。

どうやってやるの？

4

2 に答える 2

5

必要に応じて次のコードを変更します。適切な要素をループするだけで、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ますが、それはこの質問の範囲を超えています。

于 2013-03-14T18:14:25.290 に答える
1

これを試してください: このフィドルでも: 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>
于 2013-03-14T18:21:50.723 に答える