Javascript.RU

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

Обработка форм на JS (помигать бордером)
Здравствуйте!
Я так понял здесь можно задать свой вопрос по JS? Надеюсь я правильно разместил пост. Если что подправьте.

Задача.
Нужно обработать значения полей ввода телефона и email и в случае пустых полей или заполненных не правильно - помигать бордером соответствующей ячейки, запрос при этом на сервер не отсылать. Желательно, но не обязательно отключить кнопку Отправить, если нет значений в полях ввода телефона или email.

Вопросы.
1.Логика вроде бы написана верно, но не могу найти ошибку. Скрипт не работает.
2.Не получается использовать setInterval
3.Не получается отключить кнопку Отправить.

Привожу код. Стили css внутри, скрипт тоже.

Код:
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><!--  -->

<header>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Форма.</title>
<link href"reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin:0 auto;
	width:975px;
	font-family:"Trebuchet MS";
}

#test {
		border:1px solid #000;
		height:20px;
		margin:20px auto;
		width:100%;
}

#contact_form {
			color:#083481;
			margin:0 auto;
			padding-top:12px;
			width:540px;
}
.text {
		color:#000;
		font:12px Trebushet MS;
}
.text label {
			/*border:1px solid #000;*/
			float:left;
			left:0;
			margin-right:15px;
			top:0;
			text-align:right;
			width:90px;
}
.text input {
			background-color:#fff;
			border:1px solid #083481;
			width:255px;
}
.text textarea{
				background-color:#fff;
				border:1px solid #083481;
				height:115px;
				width:400px;
}
.next  {
		padding: 10px 0 0 105px;
}
#clear {margin-left:8px;}
</style>


</header>
<body>
	<!-- <div id="test"></div> -->
	
	<div id="contact_form">
		<form method="post" action="mail.html" id="form">
			<fieldset>
			<h2>Обратная связь</h2>

				<p class="text">
					<label>Ваше имя:</label>
					<input  type="text" name="user_fname" value="" id="user_fname" />
				</p>
				
				<p class="text">
					<label>Телефон:</label>
					<input  type="text" name="user_tel" value="" id="user_tel" />
				</p>
				
				<p class="text">
					<label>Email:</label>
					<input  type="text" name="user_email" value="" id="user_email" />
				</p>
				
				<p class="text">
					<label>Сообщение</label>
					<textarea id="message"></textarea>
				</p>
				<p class="next">
					<input type="submit" id="next" value="Отправить" />
					<input type="reset" id="clear" value="Очистить" />
				</p>
            </fieldset>
		</form>
	</div>
</body>
</html>
Помогите, пожалуйста, сделать проверку формы! Уже мозг кипит 2-ую неделю над решением.
Спасибо.

Последний раз редактировалось Александр345, 20.03.2011 в 16:41.
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2011, 16:39
Интересующийся
Отправить личное сообщение для Александр345 Посмотреть профиль Найти все сообщения от Александр345
 
Регистрация: 20.03.2011
Сообщений: 16

Скрипт почему-то порвал всю разметку сайта, точнее вылез аж за размеры экрана. Привожу отдельно в тегах для скрипта.
<script type="text/javascript">	
	function checkForm() {
		var form=document.forms.form,
			user_fname=form.elements.user_fname.value.toString(),
			user_tel=form.elements.user_tel.value.toString(),
			user_email=form.elements.user_email.value.toString(),
			message=form.elements.message.value.toString(),
			//регулярное выражение для проверки поля ввода номера телефона, должны быть одни цифры
			regTel=/\d{6,11}/,
			//регулярное выражение для проверки поля ввода e-mail
			regEmail=/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/,
			//ищем совпадения в введенной строке и регулярным выражением, если удовлетворяет, то значение, если нет - тогда null
			tel=user_tel.match(regTel),
			email=user_email.match(regEmail);
			
				form.onchange=function () {
					//проверка длины вводимого номера
					if (user_tel.length > 5 && user_tel.length < 12) {
						tel=user_tel.match(regTel);
						return submit();
/*	вопрос что возвращается при такой записи - return submit();
**	return submit(); это метод отправки формы на указанный в action файл обработки на сервере, а что происходит, когда мы используем
**	такую запись в функции проверки изменений в форме?
*/
					
					//если значения в поле ввода пусто или не соответствует регулярке
					} else if (user_tel=="" || tel=null) {
									checkLable(form.elements.user_tel, 2000);			//отправляем запрос с параметрами в функцию checkLable
									return false;
								}
					
					//проверяем значения в поле ввода email. Если не пусто или соответствует регулярке
					if (user_email!="" || email!=null) {
						email=user_email.match(regEmail);
						return submit();		//тот же вопрос см. выше
					} else {
							checkLable(form.elements.user_email, 2000);			//отправляем запрос с параметрами в функцию checkLable
							return false;
					}
					
					//функция мигалка. Предполагалось использовать setInterval и помигать бордером при неправильных записях в полях ввода телефона и (или) email
					//почему-то не работает!!!!
					//что не правильно?
					function checkLable(label, deley) {
						label.style.backgroundColor = '#f00';
						var interval=setInterval(function () {label.style.borderColor = '#f00'}, deley);
						clearInterval(interval);
					};
				}
				
				//планировал отключить кнопку отправки если пустые поля ввода телефона и (или) email
				//почему-то не работает!
				if (user_tel=="" || user_email=="") {
							document.forms.form.elements.next.disabled="disabled";
					}
	}
</script>

Последний раз редактировалось Александр345, 20.03.2011 в 16:48. Причина: добавление комментария
Ответить с цитированием
  #3 (permalink)  
Старый 21.03.2011, 04:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Александр345,
Вариант ... )))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
<div id="contact_form">
		<form method="post" action="mail.html" id="form" name="form" onsubmit="return check()">
			<fieldset>
			<h2>Обратная связь</h2>

				<p class="text">
					<label >Ваше имя:</label>
					<input  type="text" name="user_fname" value="" id="user_fname" />
				</p>

				<p class="text">
					<label>Телефон:</label>
					<input  type="text" name="user_tel" value="" id="user_tel" />
				</p>

				<p class="text">
					<label>Email:</label>
					<input  type="text" name="user_email" value="" id="user_email" />
				</p>

				<p class="text">
					<label>Сообщение</label>
					<textarea id="message"></textarea>
				</p>
				<p class="next">
					<input type="submit" id="next" value="Отправить" />
					<input type="reset" id="clear" value="Очистить" />
				</p>
            </fieldset>
		</form>
	</div>
<script  type="text/javascript">
var rules = {
user_fname:[/\S+/],
user_tel:[/\S+/,/\d{6,11}/],
user_email:[/\S+/,/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/],
message:[/\S+/]
};
function check() {
    var c = document.forms.form.elements,
        a;
    for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) {
        checkLable(c[a], 5);
        return false
    }
    return true
};

function checkLable(b, a) {
    b.style.backgroundColor = a % 2 ? "#f00" : "";
    a-- && window.setTimeout(function (c, d) {
        return function () {
            checkLable(c, d)
        }
    }(b, a), 300)
};
</script>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 21.03.2011, 17:11
Интересующийся
Отправить личное сообщение для Александр345 Посмотреть профиль Найти все сообщения от Александр345
 
Регистрация: 20.03.2011
Сообщений: 16

Спасибо - рони, за уделенное время, но от моего скрипта вообще мало что осталось. Это из за его непригодности или вам проще новый написать чем ковырять чужой скрипт? Просто интересуюсь. ))

Дело в том что я обучаюсь на курсах и мне нужно будет его сдавать, т.е. рассказать чего как работает. У меня пока не такие шикарные познания в JS как у вас, так что если честно то есть вещи которые я не понял в вашем скрипте.
Но давайте по порядку.
Поставили обработчик на форму при нажатии на кнопку отправляем параметры на проверку в функцию check() - это понятно.

var rules = { 
42	user_fname:[/\S+/], 
43	user_tel:[/\S+/,/\d{6,11}/], 
44	user_email:[/\S+/,/^[a-z0-9\._-]+@+[a-z0-9\._-]+\.+[a-z]{2,3}/], 
45	message:[/\S+/] 
46	};

Это вы создаете объект со свойствами и присвоенными им значениями регулярных выражений, это понятно.

function check() { 
48	    var c = document.forms.form.elements, 
49	        a; 
50	    for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) { 
51	        checkLable(c[a], 5); 
52	        return false 
53	    } 
54	    return true 
55	};


for (a in rules) не совсем понятно, что это за действие такое. Оператор in это оператор для поиска свайства или индекса (в данном случае переменная а) в объекте или индекса в массиве. Так у вас пока нет а в объекте! А дальше or (var b = 0; b < rules[a].length; b++) идет перебор свойств в объекте и уже есть а. Получается что этим for (a in rules) вы заносите пустую переменную а в объект?
Дальше вообще не могу понять что здесь проверяется!
if (!rules[a][b].test(c[a].value))
Если в свойствах объекта rules нет совпадений с регулярным выражением test(c[a].value) - так?
Получается что у объекта rulers два счетчика - а и b?
И не ясна запись c[a].value, даже если подставить значение переменной с все равно не понятно

document.forms.form.elements[a].value


Переменная а это же свойство или объект? Что-то я совсем запутался.

Вот этот кусок тоже не понятен
function checkLable(b, a) { 
58	    b.style.backgroundColor = a % 2 ? "#f00" : ""; 
59	    a-- && window.setTimeout(function (c, d) { 
60	        return function () { 
61	            checkLable(c, d) 
62	        } 
63	    }(b, a), 300) 
64	};

В строке 58 запись а%2 означает деление и в место а у вас 5. Тогда получается при делении 1 и е сли 1 то цвет красный иначе ничего, правильно я понял?
Не понятен синтаксис a-- && window.setTimeout
Т.е. вместо а - 5 получается 5-- && window.setTimeout
Это условие, тогда почему нет оператора или что это такое - запустить функцию 4 раза?
А откуда берутся параметры анонимной функции function (c, d) с и d?
Если это тоже что и b, a на входе, то почему вложена функция

60	        return function () { 
61	            checkLable(c, d) 
62	        }


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

И последний вопрос. Сейчас вы проверяете все поля на заполнение, а функция мигает только первым пустым полем. Так предусмотренно в коде чтоб так работало или этот код просто пример рабочего скрипта проверки формы?
Ответить с цитированием
  #5 (permalink)  
Старый 21.03.2011, 19:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Разбор полётов занимает время ...
Воспользуйтесь поиском здесь есть ответы на все ваши вопросы ...
for..in
замыкания
ну и вариант проверки чтоб мигало всё неправильно заполненное
function check() {
    var c = document.forms.form.elements,
        a,g = true;
    for (a in rules) for (var b = 0; b < rules[a].length; b++) if (!rules[a][b].test(c[a].value)) {
        checkLable(c[a], 5);
        g = false
    }
    return g
};
Ответить с цитированием
  #6 (permalink)  
Старый 22.03.2011, 12:03
Интересующийся
Отправить личное сообщение для Александр345 Посмотреть профиль Найти все сообщения от Александр345
 
Регистрация: 20.03.2011
Сообщений: 16

Спасибо! Будем разбираться.
Ответить с цитированием
  #7 (permalink)  
Старый 04.04.2011, 17:26
Новичок на форуме
Отправить личное сообщение для 2godoom Посмотреть профиль Найти все сообщения от 2godoom
 
Регистрация: 04.04.2011
Сообщений: 2

Рони, а можно так?

function checkLable(b, a) {
b.style.backgroundColor = a % 2 ? "#f00" : "";
a-- && window.setTimeout(function () { checkLable(b, a) }, 300)
};
Ответить с цитированием
  #8 (permalink)  
Старый 04.04.2011, 18:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

2godoom,
А самому проверить? )))
<div id="show">123</div>
<div id="test">123</div>
<script type="text/javascript">
var show = document.getElementById('show');
var test = document.getElementById('test');
function checkLable(b, a) {
b.innerHTML += b.id + ' ' + a +'<br />';
b.style.backgroundColor = a % 2 ? "#f00" : "";
a-- && window.setTimeout( function () { checkLable(b, a) }, 300)
};
checkLable(test, 7)
checkLable(show, 6)
</script>

Последний раз редактировалось рони, 04.04.2011 в 18:37. Причина: с пустыми дивами не сработает ))) добавил 123
Ответить с цитированием
  #9 (permalink)  
Старый 13.04.2011, 14:23
Интересующийся
Отправить личное сообщение для Александр345 Посмотреть профиль Найти все сообщения от Александр345
 
Регистрация: 20.03.2011
Сообщений: 16

Вот мой рабочий вариант
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><!--  -->

<header>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Форма.</title>
<link href"reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin:0 auto;
	width:975px;
	font-family:"Trebuchet MS";
}

#test {
		border:1px solid #000;
		height:20px;
		margin:20px auto;
		width:100%;
}

#contact_form {
			color:#083481;
			margin:0 auto;
			padding-top:12px;
			width:540px;
}
.text {
		color:#000;
		font:12px Trebushet MS;
}
.text label {
			/*border:1px solid #000;*/
			float:left;
			left:0;
			margin-right:15px;
			top:0;
			text-align:right;
			width:90px;
}
.user_input {
			background-color:#fff;
			border:1px solid #083481;
			width:255px;
}
.message {
			background-color:#fff;
			border:1px solid #083481;
			height:115px;
			width:400px;
}
.borderAlert {
			background-color:#fff;
			border:1px solid #f00;
			width:255px;
}
.next  {
		padding: 10px 0 0 105px;
}
#clear {margin-left:8px;}
</style>


<script type="text/javascript">	
onload=function () {
	var	user_tel="", user_email="",
		form=document.forms.form,
		user_tel=form.elements.user_tel,
		//a=user_tel.value,
		user_email=form.elements.user_email,
		//b=user_email.value,
		button=document.getElementById("next"),
		regTel=/\d/,														//регулярное выражение для проверки поля ввода номера телефона, должны быть одни цифры
		regEmail=/^[a-zA-Z0-9]+@+[a-zA-Z0-9]+\.+[a-z]{2,3}/;				//регулярное выражение для проверки поля ввода e-mail
		
	button.onclick = function () {											//обработчик кнопки отправки submit
		if (user_tel.value == "" && user_email.value == "") {					//условие пустых полей ввода номера телефона и почтового ящика
			checkLable(user_tel);
			checkLable(user_email);
			return false;
		} else  {															//в ветке иначе 2 варианта
			if (user_tel.value != "") {										//первый вариант при заполненном поле ввода номера телефона
				var a = user_tel.value,
					tel=a.search(regTel);
				
				if (tel != -1 && (a.length > 9 && a.length < 12)) {			//проверяем правильность и регулярки и длинны номера если одно условие не верно тогда else
					return tel;
				} else {
					checkLable(user_tel);
					return false;
				}
			} else {														//второй вариант при заполненном поле ввода почтового ящика
				if (user_email.value != 0) {
				
					var b=user_email.value,
						email=b.search(regEmail);
						
					if (email != -1) {
						return email;
					} else {
						checkLable(user_email);
						return false;
					}
				}
			}
		}
	};
	
	form.onsubmit=function() {												//функция обработчик нажатой кнопки
		if (tel != -1  || email != -1 ) {
			return true;
		}
		return false;
	};
	
	function checkLable(label) {											//функция мигалка. 
		var k=0;
		var interval1=setInterval(function() {
			label.setAttribute("class", "borderAlert");
			setInterval(function() {
				label.setAttribute("class", "user_input");
			}, 1300);
			k++;
			if (k == 5) {
				clearInterval(interval1);
			}
		}, 1000);
	}
}
</script>
</header>
<body>
	
	<div id="contact_form">
		<form method="post" action="mail.html" id="form">
			<fieldset>
			<h2>Обратная связь</h2>

				<p class="text">
					<label>Ваше имя:</label>
					<input  type="text" name="user_fname" value="" id="user_fname" class="user_input" />
				</p>
				
				<p class="text">
					<label>Телефон:</label>
					<input  type="text" name="user_tel" value="" id="user_tel" class="user_input" />
				</p>
				
				<p class="text">
					<label>Email:</label>
					<input  type="text" name="user_email" value="" id="user_email" class="user_input" />
				</p>
				
				<p class="text">
					<label>Сообщение</label>
					<textarea id="message" class="message"></textarea>
				</p>
				<p class="next">
					<input type="submit" id="next" value="Отправить" />
					<input type="reset" id="clear" value="Очистить" />
				</p>
            </fieldset>
		</form>
	</div>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 13.04.2011, 14:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Александр345,
Достаточно ввести номер телефона fignuy2011 и отправить валидация формы не сработает
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
проверка форм с помощиью php и js fizichello Общие вопросы Javascript 2 10.11.2009 03:31
Обработка JS в FireFox Andrey_Ugnich Firefox/Mozilla 7 21.06.2008 17:15