Показать сообщение отдельно
  #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>
Ответить с цитированием