Проверка полей
День добрый, господа!
Не могу реализовать проверку полей на каждом шаге, подскажите, как это сделать? <!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, время: 14:54. |