Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2014, 12:11
Аспирант
Отправить личное сообщение для housewm Посмотреть профиль Найти все сообщения от housewm
 
Регистрация: 21.12.2010
Сообщений: 41

Проверка формы
Пытаюсь сделать проверку формы с помощью jquery

как сделать проверку при наведении на поле разобрался, через blur

застрял на том как сделать проверку: когда нажимаем на кнопку отправки формы, происходила проверка незаполненных полей и если поля не заполнены форма не отправлялась.

подскажите в какую сторону копать и если можно пример какойнибудь
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2014, 12:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

housewm,
... вариант валидации формы на jquery ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>
  $(function () {
         $('#foo').submit(function () {
             var $input = $('input:text', this),
                 error = '';
             $input.each(function (indx, element) {
                 $val = element.value;
                 $(element).css({
                     background: $val ? '' : (error += 'незаполнено ' + element.placeholder + '\n', '#FF9494')
                 })
             });

             if (error) {
                 alert(error);
                 return false
             }
             return true;
         });

     })
  </script>
</head>

<body>
   <form id="foo" action="\">
	<input type="hidden" name="discount" value="35%">
	<input type="text" name="name" placeholder="Имя">
	<input type="text" name="email" placeholder="Email">
	<input type="text" name="phone" placeholder="Телефон">
	<input type="submit" value="Заказать звонок">
</form>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2014, 13:42
Аспирант
Отправить личное сообщение для housewm Посмотреть профиль Найти все сообщения от housewm
 
Регистрация: 21.12.2010
Сообщений: 41

Ага сделал через submit, но сейчас встал другой вопрос как связать две проверки. Сейчас получается если ввести в поле не email то проверка с blur не пойдет но так как поле уже не пустое то проверка с submit пройдет.

Как их вязать друг с другом? сделать переменную внутри blur и проверять потом ее в submit?


<html>
	<head>
		<title></title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<script>
		$(document).ready(function() {
		
			$('#foo').submit(function () {
				if($('#email').val() == '') {
					$('#email').css({'border' : '1px solid #ff0000'});
					$('#valid').text('Поле email не должно быть пустым');
				}
				else{
					$('#valid').text('Все верно');
				}
			});
			
			
			$('#email').blur(function() {
			
				var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
				if(pattern.test($(this).val())){
					$(this).css({'border' : '1px solid #569b44'});
					$('#valid').text('Верно');
				} else {
					$(this).css({'border' : '1px solid #ff0000'});
					$('#valid').text('Не верно');
				}
			
			});
		});

		</script>
	</head>
	<body>
		<form id="foo" action="/">
			<input id="email" type="text"/>
			<div id="valid"></div>
			<input type="submit" value="button"/>
		</form>
	</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2014, 14:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,181

housewm,
а зачем вам blur? проверяйте всё в submit
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2014, 14:28
Аспирант
Отправить личное сообщение для housewm Посмотреть профиль Найти все сообщения от housewm
 
Регистрация: 21.12.2010
Сообщений: 41

хочется и то и то реализовать

blur для того чтобы на лету проверялась форма
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2014, 13:25
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

Чтобы связать две проверки надо развязать функцию проверки на 2 части. Первая часть будет проверять поданное значение и возвращать либо санированное, либо ексешпн, вторая часть навешивается на поля и через потерю фокуса вызывает первую часть. Которую вы сможете зациклить и в процессе проверки всей формы перед отгрузкой.

Что требуется на тот случай, если поля заполнены автоматически, или вставкой.

Впрочем, если на js можно генерить этот blur, то и генерите его в том самом цикле.
Ответить с цитированием
  #7 (permalink)  
Старый 13.01.2014, 13:30
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

А, вот оно что:

Цитата:
<input type="submit" value="Заказать звонок">
ну с такими рулезами х кто вашим клиентам закажет калбак. Вы еще серию и номер паспорта внатури потребуйте.

Ну то есть все что вам надо, в смысле вашим клиентам, это номер телефона. Все остальные поля на усмотрение. Но вы ж тогда зачем нужны как программист...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка формы не работает в ie begelme Javascript под браузер 6 13.08.2013 01:00
Проверка данных формы составным условием? myafa Элементы интерфейса 8 01.04.2011 08:30
Проверка формы Ketsyki jQuery 0 22.01.2011 15:31
Проверка полей отправляемой формы. denisOgr jQuery 6 18.10.2010 19:40
Простая проверка формы. Добавить "динамики". Jurasmi Элементы интерфейса 3 07.04.2010 16:48