Форум

adash · #1 (**permalink**) 30.08.2018, 09:19

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

<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(); // показываем текущий
    	}
    });

laimas · #2 (**permalink**) 30.08.2018, 10:03

Одинаковые id недопустимы, в них нет никакой пользы, а одинаковые имена полей ввода в случае на сервере РНР, это проблемы, если вы только не сами обрабатываете сырые данные.

$(steps[0]).show() - не обязательно, можно CSS задать скрытыми, кроме первого. А проверять нужно не current_step, а заполненность предыдущих полей, ведь их можно очистить на любом шаге.

рони · #3 (**permalink**) 30.08.2018, 10:22

Сообщение от adash

как прикрутить проверку на заполненность обязательных полей каждого шага

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  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;
  }
  .err [required] {
      border: 2px solid red;
  }
  .err:after {
      content: 'это поле необходимо заполнить';
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var form = $("form");
    var tab = form.find(".tab");
    var current_index = 0;
    var len = tab.length;

    function show() {
        $("form input[type=submit]").toggle(current_index == len);
        $(".next").toggle(current_index < len);
        $(".back").toggle(current_index > 0);
        tab.hide().eq(current_index).show()
    }
    show();
    form.on("click", ".next", function(event) {
        event.preventDefault();
        var current_tab = tab.eq(current_index);
        var elems = $("[required]", current_tab);
        var required = [].every.call(elems, function(el) {
            var ok = el.value.trim();
            ok ? el.parentNode.classList.remove("err") :
                el.parentNode.classList.add("err");
            return ok
        });
        if (required) {
            current_index++;
            show()
        }
    });
    form.on("click", ".back", function(event) {
        event.preventDefault();
        current_index--;
        show()
    });
    form.on("input", "[required]", function(event) {
        var ok = this.value.trim();
        ok && this.parentNode.classList.remove("err")
    })
});
  </script>
</head>

<body>
<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>
</body>
</html>

Dilettante_Pro · #4 (**permalink**) 30.08.2018, 10:36

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

adash · #5 (**permalink**) 30.08.2018, 12:13

Спасибо большое за решение! Но у меня не работает, т.к. ссылки "дальше" и "назад" выводятся вне формы.

j0hnik · #6 (**permalink**) 30.08.2018, 12:20

adash,
что мешает отпозиционировать?

Dilettante_Pro · #7 (**permalink**) 30.08.2018, 12:23

Сообщение от adash

у меня не работает, т.к. ссылки "дальше" и "назад" выводятся вне формы

Читал, читал - ничего не понял.
Что значит - не работает?
Что значит - вне формы?

j0hnik · #8 (**permalink**) 30.08.2018, 12:24

Dilettante_Pro,
видимо визуально вне формы

Dilettante_Pro · #9 (**permalink**) 30.08.2018, 12:32

Тогда надо строку
<fieldset id="fset_basic" class="">
поставить сразу после тега <form>, все остальные удалить.
Перед тегом </form> вставить </fieldset>

Соответственно изменил пост 4

adash · #10 (**permalink**) 30.08.2018, 12:43

Я имел ввиду, что фома генерируется с помощью Php кода и нет возможности поставить ссылки перед закрывающим тегом </form>

</form>
<a href="#" class="back">Назад</a>
<a href="#" class="next">Следующий шаг</a>

Форум

Справочник

Discord чат

Курсы javascript