Как сделать переключение блоков с проверкой на инпуты?

Question

[Максим Иванов]

Есть два блока - form и type (может быть и больше).
После проверки инпутов (написано ли что-то в них или нет), человек нажимает на кнопку Далее и текущий блок прячется, а следующий показывается и так до последнего блока...
После первого блока появляется кнопка Назад и соответственно она возвращает тебя назад.

Просто объясните на словах как это всё реализовать, а кому не лень, то вот код... ;)

<div class="block">
	<div class="block-inner">
		<div class="block-text">
			<div class="block-title">Настройка аккаунта</div>
			<div class="block-subtitle">Укажите дополнительную информацию о вас</div>
			<span class="block-step blockStep">Шаг 1</span>
		</div>

		<div class="form">
			<div class="info">
				<input type="text" class="surname" placeholder="Ваша Фамилия">
				<input type="text" class="birthday" placeholder="Дата рождения">
				<input type="text" class="cuntry" placeholder="Страна">
				<input type="text" class="town" placeholder="Город">
			</div>

			<div class="type">
				<div class="radio-block">
					<input name="radio" type="radio" class="executor">
					<div class="radio-text">
						<div class="radio-title">Исполнитель</div>
						<div class="radio-subtitle">Краткое описание</div>
					</div>
				</div>
				<div class="radio-block">
					<input name="radio" type="radio" class="employer">
					<div class="radio-text">
						<div class="radio-title">Работадатель</div>
						<div class="radio-subtitle">Краткое описание</div>
					</div>
				</div>
			</div>

			<div class="buttons">
				<button type="button" class="prev"></button>
				<button type="button" class="next">Дальше</button>
			</div>
		</div>
	</div>
</div>

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	font-family: sans-serif;
	background-color: #F9F9F9;
}

/*================================================================================================================
==================================================================================================================*/

.block {
	width: 50%;
	margin: 200px auto;
}


.block-inner {
	display: flex;
	flex-direction: column;
}

.block-text {
	text-align: center;
}

.block-title {
	font-size: 32px;
	color: #535353;
}

.block-subtitle {
	max-width: 360px;
	margin: 10px auto 20px auto;
	font-size: 18px;
	color: #D2D2D2;
}

.block-step {
	font-size: 22px;
	font-weight: bold;
	color: #3D46FF;
}

.form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.info {
	max-width: 360px;
	margin: 0 auto;
}

.info input {
	width: 360px;
	padding: 18px 0 18px 20px;
	margin-top: 20px;
	border-radius: 4px;
	box-shadow: 0px 7px 5px #F5F5F5;
	border: 1px solid #F9F9F9;
}

.info input:first-child {
	margin-top: 50px;
}

.info input[placeholder] {
	font-size: 16px;
}

.info input:focus {
	outline: 1px solid #2C4CED;
}

/*================================================================================================================
==================================================================================================================*/

.type {
	display: none!important;
	max-width: 360px;
	margin: 50px auto 0 auto;
	display: flex;
	flex-direction: column;
}

.type input {
	width: 340px;
	padding: 50px 0;
	border: 1.5px solid #F9F9F9;
	box-shadow: 0px 7px 5px #F5F5F5;
	background-color: #fff;
	border-radius: 2px;
	outline: none;
}

.type input:focus {
	border: 1.5px solid #0076CB;
	background: #F5FAFF;
}

.type input[type="radio"] {
 	appearance: none;
}

.radio-block {
	position: relative;
}

.radio-block:last-child {
	margin-top: 20px;
}

.radio-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.radio-subtitle {
	margin-top: 10px;
}

.buttons {
	display: flex;
	align-items: flex-end;
}

.prev {
	width: 65px;
	height: 60px;
	box-shadow: 0px 7px 5px #F5F5F5;
	border-radius: 10px;
	border: 1px solid #F9F9F9;
	outline: none;
	background-color: #fff;
	position: relative;
	margin-right: 20px;
}

.prev:before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-25%, -50%) rotate(45deg);
	border-bottom: 3px solid #D2D2D2;
	border-left: 3px solid #D2D2D2;
	width: 10px;
    height: 11px;
}

.next {
	margin-top: 50px;
	padding: 20px 50px;
	background-color: #0076CB;
	box-shadow: 0px 4px 25px rgba(0, 118, 203, 0.35);
	border-radius: 10px;
	outline: none;
	border: none;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
}

const step = document.querySelector('.blockStep'),
	info = document.querySelector('.info'),
	type = document.querySelector('.type'),
	prev = document.querySelector('.prev'),
	next = document.querySelector('.next');

const step = () => {};


next.addEventListener('click', (event) => {
	
});

Comments

[Yupiter7575]

Через js свойство value проверь есть ли что-то в инпуте. В зависимосте от результата поменяй свойство hidden

Answer 1

[Антон Шаманов]

1 вариант: подгружаешь формы через ajax и хранишь промежуточные результаты в web/local storage или cookies
2. загружаешь все шаги-блоки формы сразу и отображаешь по мере необходимости, т.к. это единая форма, то потребность в доп. хранилище результатов отпадает.

Comments

[Максим Иванов]

Но у меня самая главная проблема - как переключаться между блоками? То есть представим, что у меня не два блока, а 5. То как мне с первого блока переключать на следующий и так далее?
Я тут попробовал что-то сделать через if, но думаю что это слишком тупо да и если будет к примеру 10-20 блоков (хотя у квиза так врядли будет, но представим), то тут не вариант такое юзать...
P.S. - даже если 5 блоков всего, то для кнопки prev это будет мучительно для меня (как сделал я)
Просто подскажи как реализовать "переключение" блоков, цикл for (i++)?
Вот код, что я набросал: https://codepen.io/roderen/pen/RwozXwR

[Антон Шаманов]

скрытые блоки/шаги имеют id form-step-%, отображаем блок текущего шага