Форум

housewm · #1 (**permalink**) 12.01.2014, 13:11

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

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

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

подскажите в какую сторону копать и если можно пример какойнибудь

рони · #2 (**permalink**) 12.01.2014, 13:58

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>

housewm · #3 (**permalink**) 12.01.2014, 14:42

Ага сделал через 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, 15:09

housewm,
а зачем вам blur? проверяйте всё в submit

housewm · #5 (**permalink**) 12.01.2014, 15:28

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

blur для того чтобы на лету проверялась форма

kostyanet · #6 (**permalink**) 13.01.2014, 14:25

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

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

Впрочем, если на js можно генерить этот blur, то и генерите его в том самом цикле.

kostyanet · #7 (**permalink**) 13.01.2014, 14:30

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

Цитата:

ну с такими рулезами х кто вашим клиентам закажет калбак. Вы еще серию и номер паспорта внатури потребуйте.

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

Форум

Справочник

Discord чат

Курсы javascript