Javascript validation for multiple textboxes

Question

I am having some trouble figuring out how to validate my textboxes using js. I have 10 textboxes, the user can fill out any number 1-10, but cant fill out 0. Here is the js that I have written, but it only returns true if all 10 textboxes are filled, rather than just checking if one is filled.

    function submitIt() {
    if (document.isForm.Student_ID.value == null) {
        alert ("You must enter a Colleague ID.");
        return false;
    } else {
        return true;
    }
}

And here is the form.....

<form name="isForm" onSubmit="return submitIt()">
    <input name="Student_ID" type="text" id="idField1" />
    <input name="Student_ID" type="text" id="idField2" />
    <input name="Student_ID" type="text" id="idField3" />
    <input name="Student_ID" type="text" id="idField4" />
    <input name="Student_ID" type="text" id="idField5" />
    <input name="Student_ID" type="text" id="idField6" />
    <input name="Student_ID" type="text" id="idField7" />
    <input name="Student_ID" type="text" id="idField8" />
    <input name="Student_ID" type="text" id="idField9" />
    <input name="Student_ID" type="text" id="idField10" />
    <input name="SUBMIT" type="submit" />
</form>

I realize that I could change all of the names, and check each one, but I am trying to avoid that much clutter in my code, and am curious the best way to do this. Any help is appreciated, thanks!

Solution

You can get a collection of all these textboxes with document.getElementsByName. Then loop through them, and make sure at least one is filled in:

var allTbs = document.getElementsByName("Student_ID");
var valid = false;
for (var i = 0, max = allTbs.length; i < max; i++) {
    if (allTbs[i].value) { 
       valid = true;
       break;
    }
}

DEMO

Comments

[c0deNinja]

you don't need to change all the names... you can simply loop through all the inputs inside your form tag and break out as soon as an input has a value.

[Sikshya Maharjan]

+1, I hadn't come across getElementsByName() before! So I was taking a slower way to do the same thing... =)

[Adam Rackis]

@David - yeah, there's a lot of neat stuff in the dom that using jQuery can make you unaware of (I only knew it existed because I spend so much time here on SO :) )

[Sikshya Maharjan]

I must confess that I 'learned' jQuery first (the similarity with CSS-selection was its attraction), but I am now moving towards preferring 'plain' JavaScript, now. With the exception of handling cross-browser problems. Plus, to be fair, given other JavaScript means of accessing Node collections, I really should've guessed that getElementsByName() existed... =)

[graphicdivine]

Good answer. You could also use: var allTbs=document.isForm.Student_ID;

[Adam Rackis]

That's a good point, @graphicdivine - would probably be even faster

[Adam Rackis]

Although, I think you'd want document.forms["formID"].Student_ID.length

[Jonathan Eustace]

Formatting, it needs it.