CODEWITHSUNDEEP
javascriptjqueryselectinput
Arkymedes
Arkymedes

Reputation: 179

How to show alert if multiple option values are empty

I have the following HTML and Javascript, that is not working:

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

All the first option values are empty with just the title, and the alert will be shown if any of the options are not selected. So the user needs to select from the lists at least something else that is not the first option.

How can I do that?

Upvotes: 0

Views: 998

Answers (2)

eburgos
eburgos

Reputation: 2053

Try this: Also in this fiddle: 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>

Upvotes: 1

Julian H. Lam
Julian H. Lam

Reputation: 26134

Alter the following code as necessary. Just loop through the proper elements, and if the select's value is empty, then break and handle as necessary.

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
    // ...
}

The code can be improved, for example, if you want to continue looping through all the elements, and highlight the problem select elements, but that is beyond the scope of this question.

Upvotes: 5

Related Questions