|
Сообщение от 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>