Показать сообщение отдельно
  #7 (permalink)  
Старый 01.08.2013, 23:40
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

<style>
	input[type="text"], input[type="email"] {
		width: 100px;
	}
	.invalid {
		background: red;
	}
</style>

<form id="test">
	<input type="text" title="имя"></input>
	<input type="email" title="email"></input>
	<input type="text" title="тема"></input>
	<input type="text" title="сообщение"></input>
	<span id="required"></span><br>
	<input type="submit" >
</form>

<script>
window.onload = function() {

	var	form = document.forms[0],
			fields = form.querySelectorAll('input[type="text"], input[type="email"]'),
			msg = document.getElementById('required'),
			regExp = [/^[А-Яа-яЁё]+$/, /.+@.+\..+/i, /^[А-Яа-яЁё\W\s\d]+$/, /^[А-Яа-яЁё\W\s\d]+$/];

	form.onsubmit = function(event) {
		var valid = true, cnt = 0;
		
		event.preventDefault();
		
		Array.prototype.forEach.call(fields, function(input) {
			input.classList.remove('invalid');
			if(!input.value.length) {
				cnt++;
			}
		})
		
		if(cnt == fields.length) {
			Array.prototype.forEach.call(fields, function(input) {
				input.classList.add('invalid');
			})
			msg.innerHTML = 'Заполните обязательные поля!';
			return;
		}		
		
		for (var i = 0, l = fields.length; i < l; i++) {
			fields[i].classList.remove('invalid');
			if(!fields[i].value.match(regExp[i])) {
					fields[i].classList.add('invalid');
					msg.innerHTML = 'Неверно введено поле ' + fields[i].title + '!';
					valid = false;
					break;
			}
		}
		
		if (valid) {
			form.submit();
		}
		
	}
}
</script>
Ответить с цитированием