Как уведомлять об обязательных для заполнения полях на неактивных вкладках?

Question

[Brainbao]

Есть форма, в которой поля размещены в разных вкладках. Пользователь заполняет поле на одной вкладке, но оставляет без внимания поля на других, неактивных. При этом некоторые из этих полей обязательны для заполнения. При этом при отправке формы никакого оповещения не происходит, как и самой отправки. Оповещение о незаполненном поле происходит только в случае, если вкладка, на которой это поле находится, в данный момент активна. Как решить эту проблему? Вариант с размещением всех обязательных полей на первой вкладке не предлагать.

Подскажите скрипт на JS или jQuery.

Ссылка на пример

Comments

[Дима Долготер]

как человк должен знать что есть другие поля и тем более что они обязательны?

[secretsergey]

Скроллить до вкладки с ошибкой и отмечать её некими стилями, например красным цветом.
Либо же открывать эту вкладку и скроллить прямо к полю.

[Brainbao]

SpiderPigAndCat, все вкладки доступны для выбора, указал ссылку на пример.

[Дима Долготер]

Brainbao, то что я и писал. у блоков display none. надо сделать в помощью position absolute и z-index. по клику вешаешь класс на section чтоб был z-index 999 и на js делай валидацию. если отправляют, а поле пустое то вешаешь родителю (section) тот же класс. и так со всеми инпутами.

НО это просто ужас. не делай форму в табах. можно кнопку делать disabled и чтоб она всегда была видна. когда заполняешь поле первое то переключается само или ты сам переключаешь на след вкладку и когда зполнил все поля то кнопка становится нажимаемой

[Brainbao]

SpiderPigAndCat, приходится делать в табах, потому что иначе слишком много полей будет на одной странице, что отпугнет пользователя. И у меня не форма в табах, а табы внутри формы :)

Answer 1

[Brainbao]

Решил так

Answer 2

[Дима Долготер]

а если вкладка не активна то она display none или все-таки z-index используется?