Validating multiple sections of the page, but only having one submit button

I am writing a page that has one form tag and one submit button, but has multiple spots for input....

<form>
...
</table class="t1">
  <tr>
    <td><input name="name1" /></td>
    <td><input name="stDate" /></td>
    <td><input name="endDate" /></td>
    <td><input name="description1" /></td>
  </tr>
</table>
<table class="t2">
  <tr>
    <td><input name="name2" /></td>
    <td><input name="date2" /></td>
    <td><input name="description2" /></td>
    <td><input name="email2" /></td>
    <td><input name="id2" /></td>
  </tr>
</table>
<table class="t3">
  <tr>
    <td><input name="name3" /></td>
    <td><input name="date3" /></td>
    <td><input name="description3" /></td>
  </tr>
</table>
....
  <div align="center" class="submit">
    <input class="submit" width="10%" type="submit" name="submit" id="submit" value="Submit" />
  </div>
</form>

None of these fields are required, the user can fill out every field or doesn't have to fill out any of the fields. Where I run into the problem is, if the user fills out the any of the fields o开发者_JS百科n table "t1" then I need to require that the other fields be filled out as well for table "t1".....and the same for table "t2" and "t3". --Also, note, the input fields are unique, bc I am writing to a DB after submit. Thanks for the help, and please request more info it if is needed.

You could do something like:

<form ... onsubmit="return validate_form();">
...
</form>
<script type="text/javascript">
    function validate_form(){
        var name_list = document.getElementsByName('name');
        var date_list = document.getElementsByName('date');
        var desc_list = document.getElementsByName('description');
        var is_valid = true;
        for( var i=0; i<name_list.length; i++ ){
            var n = name_list[i].value.length > 0;
            var d = date_list[i].value.length > 0;
            var ds = desc_list[i].value.length > 0;
            if( !( (n && d && ds) || (!n && !d && !ds) ) ) {
                is_valid = false;
            }
        }

        return is_valid;
    }
</script>

Something like that anyway

One thing you can do is use getElementsByName. Then you will get arrays of name, date and description. Then you can iterate through them and make sure that if name[0] is not blank then date[0] and description[0] are not blank etc.

Update to support the updated question:

In that case a better option would be to use jquery which provides easier syntax for doing the same. You can have a dummy css class to use for your tables that form the FORM sections. e.g.

<table class="t1 formsection">

"formsection" is the dummy css class.

Then using jquery you can get $(".formsection") which will give all the form sections. JQuery allows you to get the children of a specific element type of a given element. Using that you can get the input elements for a each of the form section.

Once you have that you can loop through those input elements to see if all are blank or all arte filled.