Как проверить заполненность полей в пошаговой форме?

Question

[Azami]

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

<form>
    <div class="form-tabs">
    
    <div class="tab">
    <fieldset id="fset_basic" class="">
    <span class="more"><legend>Шаг 1</legend></span>
    <div>
    <input type="text" class="input" name="title" value="" id="title" required="">
    </div>
    <div>
    <textarea name="description" class="textarea" rows="" id="description"></textarea>
    </div>
    </div>
    
    <div class="tab">
    <fieldset id="fset_basic" class="">
    <span class="more"><legend>Шаг 2</legend></span>
    <div>
    <input type="text" class="input" name="title" value="" id="title" required="">
    </div>
    <div>
    <textarea name="description" class="textarea" rows="" id="description"></textarea>
    </div>
    </div>
    
    <div class="tab">
    <fieldset id="fset_basic" class="">
    <span class="more"><legend>Шаг 3</legend></span>
    <div>
    <input type="text" class="input" name="title" value="" id="title" required="">
    </div>
    <div>
    <textarea name="description" class="textarea" rows="" id="description"></textarea>
    </div>
    </div>
    </div>
    <div>
    <a href="#" class="back">Назад</a>
    			<a href="#" class="next">Следующий шаг</a>
    </div>
    	
    <div>
    <input class="button-submit" type="submit" name="submit" value="Опубликовать" title="Опубликовать"></div>
    
    </form>

    form div.tab {
    		display:none;
    	}
    
    	a.back {
    		display:none;
    	}
    	
    	form input[type=submit] {
    		display:none;
    	}
    
    .tab input.empty_field {
          border-width: 2px;
          border-color: red;
        }

    $(document).ready(function() { // Ждём загрузки страницы
    	var steps = $(".form-tabs").children(".tab"); // находим все шаги формы
    	$(steps[0]).show(); // показываем первый шаг
    	var current_step = 0; // задаем текущий шаг
    	$("a.next").click(function(){	// Событие клика на ссылку "Следующий шаг"
    			if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним
    				$(this).hide(); // скрываем ссылку "Следующий шаг"
    				$("form input[type=submit]").show(); // показываем кнопку "Регистрация"
    			}
    			$("a.back").show(); // показываем ссылку "Назад"
    			current_step++; // увеличиваем счетчик текущего слайда
    			changeStep(current_step); // меняем шаг
    	});
    	
    	$("a.back").click(function(){	// Событие клика на маленькое изображение
    		if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым
    			$(this).hide(); // скрываем ссылку "Назад"
    		}
    		$("form input[type=submit]").hide(); // скрываем кнопку "Регистрация"
    		$("a.next").show(); // показываем ссылку "Следующий шаг"
    		current_step--; // уменьшаем счетчик текущего слайда
    		changeStep(current_step);// меняем шаг
    	});
    	
    	function changeStep(i) { // функция смены шага
    		$(steps).hide(); // скрываем все шаги
    		$(steps[i]).show(); // показываем текущий
    	}
    });

Ссылка на пример тут https://codepen.io/WA-A/pen/NLREKB

Answer 1

[dollar]

Установить кнопку перехода в disabled (или убрать onclick, если это простой элемент).
И по таймеру проверять форму - динамически обновлять каждое поле и кнопку перехода в соответствии с соблюдением условий.

Comments

[longclaps]

Да-да, непременно по таймеру.
Опупеть.

[dollar]

Знал, что будет такое замечание.
Как по мне, дело вкуса.

[longclaps]

dollar, так бывает - едет бомж в метро, от него пахнет, а он с апломбом:
"Как по мне, дело вкуса".

[Azami]

Немного изменил.
Но не работает из-за того, что ссылки вынесене вне
Возможно ли в данном случае реализовать задуманное?
https://codepen.io/WA-A/pen/NLREKB