JavaScript для открытия/удаления скрытых блоков
Добрый день!
Дано:
Форма для заполнения данных об участниках группы.
1 общее поле E-mail,
1 блок открыт всегда для 1 частника,
9 скрытых блоков участников.
Блок - это группа полей (Имя, Пол, Гражданство, может дополняться позже новыми полями).
Задача 1:
1. При каждом клике на ссылку "Добавить человека" показываем 1 скрытый блок.
2. Когда показаны все 10 блоков скрываем ссылку "Добавить человека".
3. Начиная со 2-го блока, блок можно скрыть по клику на ссылку "Удалить". При клике "Удалить" все поля блока должны быть очищены.
3.1. Если мы скрываем блок, а до этого ссылка "Добавить человека" была скрыта, т.к. все 10 блоков были раскрыты, то ссылка "Добавить человека" должна появиться, т.к. освободилось 1 место.
4. Ко всем полям (input.select), при клике "Добавить человека" должно добавиться required.
При удалении человека, required должен удаляться. То есть не мешать отправке формы из-за данного условия.
Задача 2:
1. Нужна доп проверка на заполненность полей помимо required. Например, версия браузера не поддерживает required.
Все поля (input,select) обязательны для заполнения. Если не заполнено поле 2-го человека, скрипт должен выдать alert (стандартное всплывающее окно): "Не заполнено Гражданство 2-го человека". Если 3-го, то указать 3-го человека и т.д.
2. Скрипт должен идти отдельно, чтобы интегрировать его позже. Например, указали id формы и скрипт включился. То есть не нужно его интегрировать с задачей 1.
Условия:
1) Кроссбраузерное решение. Использование максимально поддерживаемых функций. Не используем самые новые, а те, что максимально поддерживаются, IE в том числе.
2) Чистый Javascript.
3) Решение должно работать на ПК, планшетах и смартфонах (Andriod/iOS).
4) Решение не должно быть тяжелым в плане производительности. Если какая-то задача слишком тяжелая-долгая, напишите об этом. Подумаем, можем ли убрать-изменить подход.
Условие адаптивности важно, т.к. пользователи в среднем 40+. То есть у них могут быть старые версии браузеров-компьютеров.
ЗЫ. Для удобства я прикрепил html файл с готовой формой. 2-ой блок открыт для примера. Осталось только, чтобы заработали ссылки (Добавить/Удалить) и проверка на заполнение.