Проверка нескольких разделов страницы, но только с одной кнопкой отправки

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 позволяет вам получить дочерние элементы определенного типа элемента данного элемента.Используя это, вы можете получить входные элементы для каждого раздела формы.

Как только вы это сделаете, вы можете просмотреть эти входные элементы, чтобы увидеть, все ли они пустые или все заполнены.