Как проверить заполненность полей в пошаговой форме?
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(); // показываем текущий
}
});
|
Одинаковые id недопустимы, в них нет никакой пользы, а одинаковые имена полей ввода в случае на сервере РНР, это проблемы, если вы только не сами обрабатываете сырые данные.
$(steps[0]).show() - не обязательно, можно CSS задать скрытыми, кроме первого. А проверять нужно не current_step, а заполненность предыдущих полей, ведь их можно очистить на любом шаге. |
форма пошаговая обязательные поля
Цитата:
<!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>
|
<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,
что мешает отпозиционировать? |
Цитата:
Что значит - не работает? Что значит - вне формы? |
Dilettante_Pro,
видимо визуально вне формы |
Тогда надо строку
<fieldset id="fset_basic" class=""> поставить сразу после тега <form>, все остальные удалить. Перед тегом </form> вставить </fieldset> Соответственно изменил пост 4 |
Я имел ввиду, что фома генерируется с помощью Php кода и нет возможности поставить ссылки перед закрывающим тегом </form>
</form> <a href="#" class="back">Назад</a> <a href="#" class="next">Следующий шаг</a> |
adash,
Даже если они не в форме, на работоспособности это никак не скажется. В примере пост 4 вынес ссылки из формы. |
Цитата:
Спасибо за отредактированное сообщение. Простите. Привязался. Но теперь кнопка "опубликовать" стала отдельным шагом. А не появляется ниже под последним блоком |
Цитата:
if (current_step == steps.length-2) { - как у вас и было раньше. Но тогда проверка последнего обязательного поля будет выполняться несколько по-другому |
Спасибо. Заработало. В принципе на последнем шаге по идее нет обязательных полей.
Дополнил форму select'ами решил попробовать проверять выпадающие списки, но не сработало. Как и не сработало на втором шаге, где поле выбора даты, город и телефон - тоже обязательные. Прицепить к ним reqired не представляется возможным. Со вчерашнего дня морочусь, чтобы не выклянчивать готового решения, но видно не судьба. Может поможете за плату? https://codepen.io/WA-A/pen/NLREKB |
пошаговая форма
adash,
поля которые будут проверятся отмечены классом required (зелёные) http://plnkr.co/edit/IN8cSDHapQPf3Oc2lfaY?p=preview |
рони,
спасибо! А если нет возможности класс добавить .required? Можно ли перечислить классы, которые заданы по умолчанию и применить условия к ним? |
Вроде бы получилось, но не могу на втором шаге сделать проверку в поле .cuty-input не равно 0
http://plnkr.co/edit/qO8z7dk5FwruwzO2uAYf?p=preview |
Цитата:
var elems = $(".required, .city-id, #parent_cat_id, #category_id", current_tab);
add не нужен. Цитата:
|
сорри .city-id
|
Правильно понимаю, что можно это сделать через if ($('.city-id').val() == 0) elems = elems.add($('.city-id'))?
|
Цитата:
пост 18 |
adash,
function audit(current_tab) {
*!*
var elems = $(".required, .city-id, #parent_cat_id, #category_id", current_tab);
*/!*
return [].every.
и тут form.on("input change", ".required, .city-id, #parent_cat_id, #category_id", function(event) { var ok = this.value.trim(); ok && ok != "0" && this.classList.remove("empty_field") }) |
Добавил
var elems = $(".required", #parent_cat_id, #category_id, current_tab).add('');
var input = $('.city-id');
if (input.val() == 0)
elems = elems = elems.add(input);
Но переход на второй шаг не осуществляется, может из-за того, что поле скрыто? <input type="hidden" class="input city-id" name="city" value="0"> |
Не увидел предыдущего комментария, сейчас проверю
|
рони,
Сейчас протестирую на сайте, подскажите, а можно ли подсвечивать класс city-input при city-id = 0? Я так понимаю, проверка происходит, а вот визуально не выделяется воле |
Цитата:
var ok = el.value.trim();
el.classList.contains("city-id") && (el = el.parentNode);
|
adash,
form.on("input change", ".required, .city-id, #parent_cat_id, #category_id", function(event) {
var el = this;
var ok = el.value.trim();
el.classList.contains("city-id") && (el = el.parentNode);
ok && ok != "0" && el.classList.remove("empty_field")
})
function audit(current_tab) {
var elems = $(".required, .city-id, #parent_cat_id, #category_id", current_tab);
return [].every.call(elems, function(el, i) {
var ok = el.value.trim();
el.classList.contains("city-id") && (el = el.parentNode);
ok && +ok != 0 ? el.classList.remove("empty_field") :
el.classList.add("empty_field");
return ok && ok != "0"
});
}
|
рони,
Урра! Сработало! А обязательные поля сразу все на шаге могут подсвечиваться, не по очереди? |
Цитата:
|
adash,
function audit(current_tab) {
var elems = $(".required, .city-id, #parent_cat_id, #category_id", current_tab);
var check = true;
[].forEach.call(elems, function(el, i) {
var ok = el.value.trim();
el.classList.contains("city-id") && (el = el.parentNode);
ok && +ok != 0 ? el.classList.remove("empty_field") :
(el.classList.add("empty_field"),check = false);
});
return check;
}
|
| Часовой пояс GMT +3, время: 12:21. |