[Dilettante_Pro]

<style>
    form div.tab {
    		display:none;
    	}
    
    	a.back {
    		display:none;
    	}
    	
    	form input[type=submit] {
    		display:none;
    	}
    
    .empty_field {
          border-width: 2px;
          border-color: red;
        }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    $(document).ready(function() { // Ждём загрузки страницы
    	var steps = $(".form-tabs").children(".tab"); // находим все шаги формы
    	$(steps[0]).show(); // показываем первый шаг
    	var current_step = 0; // задаем текущий шаг
    	$("a.next").click(function(){	// Событие клика на ссылку "Следующий шаг"
    			var req= $(steps[current_step]).find('input');
                        if($(req).attr('required') == 'required' && req.val() == '') {
                            $(req).addClass('empty_field');
    			} else {
                            $(req).removeClass('empty_field');
    			   if (current_step == steps.length-1) { // проверяем, будет ли следующий шаг последним
    				$(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(); // показываем текущий
    	}
    });
</script>
<form>
  <fieldset id="fset_basic" class="">
    <div class="form-tabs">
    
       <div class="tab">

          <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">

           <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">

           <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>
        <input class="button-submit" type="submit" name="submit" value="Опубликовать" title="Опубликовать">
    </div>
   </fieldset>    
</form>
    <div>
        <a href="#" class="back">Назад</a>
        <a href="#" class="next">Следующий шаг</a>
    </div>