验证页面的多个部分，但只有一个提交按钮

Question

我正在编写一个页面，该页面有一个表单标签和一个提交按钮，但有多个输入点......

<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>

这些字段都不是必需的，用户可以填写每个字段，也可以不必填写任何字段字段。我遇到的问题是，如果用户填写表“t1”上的任何字段，那么我需要要求表“t1”也填写其他字段......并且相同对于表“t2”和“t3”。 --另外，请注意，输入字段是唯一的，因为我在提交后写入数据库。感谢您的帮助，如果需要，请索取更多信息。

Answer 1

你可以做这样的事情：

<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>

无论如何，类似的事情

Answer 2

您可以做的一件事是使用 getElementsByName。然后你将得到名称、日期和描述的数组。然后您可以迭代它们并确保如果名称[0]不为空，则日期[0]和描述[0]不为空等。

更新以支持更新的问题：

在这种情况下更好的选择是使用 jquery，它提供了更简单的语法来执行相同的操作。您可以使用一个虚拟 css 类来用于形成 FORM 部分的表。例如

<table class="t1 formsection">

“formsection”是虚拟的CSS类。

然后使用 jquery 你可以获得 $(".formsection") 它将给出所有表单部分。 JQuery 允许您获取给定元素的特定元素类型的子元素。使用它，您可以获得每个表单部分的输入元素。

完成后，您可以循环浏览这些输入元素，看看是否全部为空白或全部填充。