form input element arrays with mootools

Question

I tried searching for the answer to this, but did not find the specific answer I was looking for. In mootools, how do I access a form input element like below that has an array name using the "double dollar" ($$) function to be able to iterate through for form validation.

<input name="field[inventory_id]" type="text" />
<input name="field[asset_tag]" type="text" />
<input name="field[idea_tag] type="text" />
<input name="field[equip_make]" type="text" />
<input name="field[equip_model]" type="text" />

etc...

Thanks

Dan B

Answer 1

In MooTools you can use for example:

$$('input[name^="field"]')

This will get you all the input elements that have a name attribute starting with "field".

You could combine with that a .filter() with a funcion for validating and check in the end `the length property of this elements collection. Something like:

$$('button').addEvent('click', function () {
    var inputs = $$('[name^="field"]');
    var notValidating = inputs.filter(function (input) {
        return !input.value;
    })
    alert('There are ' + notValidating.length + ' inputs not validating.');
});

jsFiddle: http://jsfiddle.net/kthaqmL2/

Answer 2

So I worked on this for a bit and came to the conclusion that giving all of the input elements a classname was the best method. I then used mootools double dollar function to iterate over all of the items with that classname.