Loop through divs and check that input fields have been filled in?

I have the following structure

<div id="rows">

<div id="row-0" class="row">
<input name="firstname[]" class="firstname" type="text" />
<input name="lastname[]" type="text" class="lastname" />
<input name="email[]" type="text" class="email" />
</div>

<div id="row-1" class="row">
<input name="firstname[]" class="firstname" type="text" />
<input name="lastname[]" type="text" class="lastname" />
<input name="email[]" type="text" class="email" />
</div>


and so on... the number of these div rows is dynamic

</div>



What I'd like to do is loop through each div row ("row-0", "row-1"..) and check that both the firstname and lastname fields have been filled in. If not, then I would like to display a generic message and place the cursor in the blank field.

Does anyone have any suggestions on how to use this?

function validate(f){
var fnames = f.elements["firstname[]"];
var lnames = f.elements["lastname[]"];
var len = fnames.length;
for (var i=0; i<len; i++){
if (fnames[i].value==""){
alert("First name is required");
fnames[i].focus();
return false;
}
if (lnames[i].value==""){
alert("Last name is required");
lnames[i].focus();
return false;
}
}
return true;
}
...
<form ... onsubmit="return validate(this)">
...
<input type="submit" name="btnSubmit" value="Submit" />
</form>

I see. Awesome.

Thanks :thumbsup: