Javascript + HTML How to validate multidimensional select objects

Question

I am trying to validate all the material dropdowns. But I am getting frm.material is undefined error on my system.

HTML MARKUP

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

I have created a jsFiddle which you can find here http://jsfiddle.net/QgghZ/12/

The value of first select option is <option value="-1">Select</option> and Need to check if any of the dropdown is not set to select.

I need a js function to validate these dropdowns.

Thank you all for your support in advance

EDIT

Thank you all for fixing the jsFiddle issues, but I need a validation function which can iterate over these dropdowns.

EDIT

If I use the following JS it shows the names

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

Here is how I got all the values

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

}

So by this it will only check for the material dropdowns even if there are other select boxes as well. And I can iterate over the value to see if any have -1 in that.

Answer 1

Besides the typo on the form name, you will not get an array of the selects through frm.material, they are not grouped like this, as when you receive the form in your backend script. You could access them with something like frm["material[1][]"] , but instead of that I'd use another aproach like document.getElementsByClassName('material_dd') so you can know how many elements are there.

Answer 2

I dont understand why it not working, but I change your code a little, and now its working

[jsFiddle][1]


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

Answer 3

Your jsfiddle settings setup were wrong, Below is the updated Link:

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

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

Further more You have Form tag as:

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

and then in the script you call:

 frm = document.getElementById("testFrm");

There is no Form with id of testFrm

Answer 4

Replace frm = document.getElementById("testFrm");

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