Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.09.2017, 14:10
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

Проверка полей
День добрый, господа!
Не могу реализовать проверку полей на каждом шаге, подскажите, как это сделать?
<!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>");
}
Ответить с цитированием
  #2 (permalink)  
Старый 26.09.2017, 14:43
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<form action="">
   <input name="user" required placeholder="Ваше имя">
   <input name="user" required placeholder="Вашa Фамилия">
   <input type="email" required placeholder="Ваш mail">
   <input type="submit" value="Отправить">
  </form>
Ответить с цитированием
  #3 (permalink)  
Старый 26.09.2017, 14:50
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

В данном случае не работает, пробовал.
Есть вариант на javascript?
Ответить с цитированием
  #4 (permalink)  
Старый 26.09.2017, 14:52
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

проверять только на пустоту?
Ответить с цитированием
  #5 (permalink)  
Старый 26.09.2017, 15:14
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

Да, пока форма не заполнена, выводить сообщение о необходимости заполнения. И так на каждом шаге
Ответить с цитированием
  #6 (permalink)  
Старый 26.09.2017, 15:26
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

<!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>
Ответить с цитированием
  #7 (permalink)  
Старый 26.09.2017, 16:29
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

Да, Вы верно поняли меня, но не совсем... как при этом сохранить пошаговое приложение? чтобы на каждом шаге проверял поле?
Ответить с цитированием
  #8 (permalink)  
Старый 26.09.2017, 20:19
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

с каждым нажатием клавиши проверяет.
Ответить с цитированием
  #9 (permalink)  
Старый 27.09.2017, 16:17
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

да, но структура программы теряется... необходимо на каждой странице одно поле с проверкой. Вот пример
Ответить с цитированием
  #10 (permalink)  
Старый 27.09.2017, 16:19
Новичок на форуме
Отправить личное сообщение для AndrewDanilin Посмотреть профиль Найти все сообщения от AndrewDanilin
 
Регистрация: 26.09.2017
Сообщений: 9

Просто в js я не очень силён, поэтому прошу помощи
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка полей при отправке all4me1982 Общие вопросы Javascript 6 17.03.2015 14:02
Проверка полей serrrgggeee Javascript под браузер 0 08.10.2014 15:16
Проверка полей при потере фокуса Paltusssss Общие вопросы Javascript 2 13.08.2013 19:32
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
проверка полей формы!!!! DENAT Общие вопросы Javascript 0 05.06.2008 22:14