validation of fields in this situation

<div id="default-box">
    <span class="add"><input type="text" class="name" /><input type="text"  class="email"/></span>
    <span class="add"><input type="text" class="name" /><input type="text"  class="email"/></span>
    <span class="add"><input type="text" class="name" /><in开发者_运维问答put type="text"  class="email"/></span>

</div>

This code will arrange the name and email fields in rows and column. First row will contain name and email as a unit and same for the other rows. I want to validate each row as unit. Suppose name or email field are empty or email is not valid so when I enter the tab from email column of 1st row to move to second row it will show an error. I could not figure out the way to catch a row as unit. Thanks

Try this: (JQuery)

var allCorrect = true;
$('span.add').each(function(index){
    var name = $(this).children('input.name').val();
    var email = $(this).children('input.email').val();
    //VALIDATE name AND email HERE
    if (/*not-valid boolean here*/)
    {
        $(this).css("border", "1px solid red"); // Set red-border for wrong row 
        allCorrect = false;
    }
});
if(allCorrect)
{
    //DO SOMETHING ABOUT IT
}

You can put this in a function. Which could be called on form submit or click of button.