| AndrewDanilin | 27.09.2017 16:17 |
да, но структура программы теряется... необходимо на каждой странице одно поле с проверкой. Вот пример
Проверка полей
День добрый, господа!
Не могу реализовать проверку полей на каждом шаге, подскажите, как это сделать? <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>JavaScript</title> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript" src="js/steps_registration.js"></script> <script type="js/1.js"></script> </head> <body> <div class="wrapper"> <form action="#" method="post"> <div class="step"> <p class="step">Введите своё имя</p> <p><strong>Имя:</strong><input type="text" name="msg" id="msg" placeholder="Введите имя"></p> </div> <div class="step"> <p class="step">Введите вашу фамилию</p> <p><strong>Фамилия:</strong><input type="text" name="surname" placeholder="Введите фамилию"></p> </div> <div class="step"> <p class="step">Введите ваш email</p> <p><strong>Email:</strong><input type="text" name="email" placeholder="Введите ваш email"></p> </div> <p class="talign"> <a href="#" class="back">Назад</a> <a href="#" class="next">Далее</a> <input type="submit" value="Завершить" onClick="Thanks();"> </p> </form> </div> </body> </html>
$(document).ready(function() {
var steps = $("form").children(".step");
$(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();
}
});
function Thanks(){
jQuery("body").empty(); // очищаем тело документа
jQuery("body").append("<h2><center>Спасибо!</center></h2>");
}
|
<form action=""> <input name="user" required placeholder="Ваше имя"> <input name="user" required placeholder="Вашa Фамилия"> <input type="email" required placeholder="Ваш mail"> <input type="submit" value="Отправить"> </form> |
В данном случае не работает, пробовал.
Есть вариант на javascript?:help: |
проверять только на пустоту?
|
Да, пока форма не заполнена, выводить сообщение о необходимости заполнения. И так на каждом шаге
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<br>
</div>
<br>
<button id="send" disabled>Отправить</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('input').on('input', function(){
var a = 0;
$('input').each(function() {
if(this.value.length<3) {
a = 1;
this.style.backgroundColor = 'red';
}
else this.style.backgroundColor = 'green';
});
$('#send').prop('disabled', a);
});
$('#send').on('click', function(){
$("body").empty();
$("body").append("<h2><center>Спасибо!</center></h2>");
});
</script>
</body>
</html>
|
Да, Вы верно поняли меня, но не совсем... как при этом сохранить пошаговое приложение? чтобы на каждом шаге проверял поле?
|
с каждым нажатием клавиши проверяет.
|
да, но структура программы теряется... необходимо на каждой странице одно поле с проверкой. Вот пример
|
Просто в js я не очень силён, поэтому прошу помощи
|
AndrewDanilin,
А зачем вам нужен такой телетайпный стиль? Если бы поля как-то зависели друг от друга - в зависимости от того, что введено в предыдущем, выбирается следующее поле - тогда это имело бы смысл. А при равноправных полях зачем? Все поля можно заполнять в любой последовательности, независимо друг от друга |
сам скрипт уже написан постраничного перехода, вопрос в том, что к нему необходимы обязательный поля.. а допереть как их сделать, я не могу. нужен именно постраничный.
|
Цитата:
|
Буду краток тогда, нужен телетайпный стиль с обязательными полями на каждом тапе
|
с некоторыми недоработками
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<div class="wrapper">
<form action="#" method="post">
<div class="step">
<p class="step">Введите своё имя</p>
<p><strong>Имя:</strong><input type="text" name="msg" id="msg" placeholder="Введите имя"></p>
</div>
<div class="step">
<p class="step">Введите вашу фамилию</p>
<p><strong>Фамилия:</strong><input type="text" name="surname" placeholder="Введите фамилию"></p>
</div>
<div class="step">
<p class="step">Введите ваш email</p>
<p><strong>Email:</strong><input type="text" name="email" placeholder="Введите ваш email"></p>
</div>
<p class="talign">
<a href="#" class="back">Назад</a>
<a href="#" class="next">Далее</a>
<input type="submit" value="Завершить" onClick="Thanks();">
</p>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var steps = $("form").children(".step").hide();
$('a.back').hide();
$('a.next').hide();
$('input[type=submit]').hide();
var current_step = 0;
$(steps[current_step]).show();
$(steps).on('input', function() {
if($(this).find('input').val().length > 2) {
if(current_step < steps.length - 1) {
$('a.next').show();
$("form input[type=submit]").hide();
}
else {
$('a.next').hide();
$("form input[type=submit]").show();
}
}
else {
$('a.next').hide();
$("form input[type=submit]").hide();
}
});
$("a.next").click(function(){
$(steps[current_step]).hide();
current_step++;
$(steps[current_step]).show();
$(this).hide();
current_step > 0 ? $('a.back').show() : $('a.back').hide();
});
$("a.back").click(function(){
if (current_step == 1) {
$(this).hide();
}
$("form input[type=submit]").hide();
$("a.next").show();
$(steps[current_step]).hide();
current_step--;
$(steps[current_step]).show();
});
});
function Thanks(){
jQuery("body").empty(); // очищаем тело документа
jQuery("body").append("<h2><center>Спасибо!</center></h2>");
}
</script>
</body>
</html>
|
Спасибо большое, буду разбираться с js!
|
| Часовой пояс GMT +3, время: 11:33. |