Грамотная валидация формы

[seniormelikyan]

Люди, помогите, пожалуйста Никак не могу реализовать нормальную валидацию формы. Есть 4 поля: "Имя", "E-mail", "Тема", "Сообщение". Как реализовать проверку на их заполнение, чтобы выводилось сообщение о том, какие(-ое) поля(-е) не заполнены(-о) вообще, а какие(-ое) - не соответствуют(-ет) регулярным(-ому) выражениям(-ю)?

Регулярные выражения для полей имеются:

1: /^[А-Яа-яЁё]+$/ - "Имя" - одно слово на русском в любом регистре
2: <input type="email"> - "E-mail" - подскажите, пожалуйста, если есть что-то лучше
3, 4: /^[А-Яа-яЁё\W\s\d]+$/ - "Тема", "Сообщение" - все, что угодно, но только на русском

[ruslan_mart]

seniormelikyan, обычно такое проверяют на стороне сервера.

[ksa]

Никак не могу реализовать нормальную валидацию формы.

В чем именно проблема?

[seniormelikyan]

Проблема - в том, что не получается реализовать проверку каждого условия, а не какого-то конкретного в отдельности. Мне нужно, чтобы форма не отправлялась, пока не будут соблюдены все условия. Вот мой код: Сейчас, если все поля пусты, при нажатии на кнопку "Отправить", в поле ошибки выводится "Введите свое имя на русском языке...", хотя я ожидаю "Заполните все поля". Я запутался в своих же условиях. В общем, никак я этой форме ума не дам.

window.onload = function() {

form = document.forms[0],
fields = form.getElementsByTagName('input'),
msg = form.getElementById('required'),
regExp = /^[А-Яа-яЁё\W\s\d]+$/;

form.onsubmit = function(event) {

for (var i = 0; i < fields.length; i++) {

if (!fields[i].value) {
event.preventDefault();
fields[i].className = 'invalid';
msg.innerHTML = 'Заполните обязательные поля';
}

else
fields[i].className = "";

if (fields[0].value.search(/^[А-Яа-яЁё]+$/)) {
event.preventDefault();
msg.innerHTML = fields[0].title;
fields[0].className = 'invalid';
}

else if (fields[2].value.search(regExp)) {
event.preventDefault();
msg.innerHTML = fields[2].title;
fields[2].className = 'invalid';
}

else if (fields[3].value.search(regExp)) {
event.preventDefault();
msg.innerHTML = fields[3].title;
fields[3].className = 'invalid';
}

}
}
}

[seniormelikyan]

А если сделать проверку, включен ли Javascript, и, если нет, вывести сообщение об ошибке с ссылкой на Google Help по включению Javascript и не пустить пользователя никуда, пока он его не включит? Можно, конечно, и на стороне сервера повозиться, но мне кажется, что такой вариант тоже вполне себе приемлем. Я прав?

[seniormelikyan]

Кто-нибудь может мне помочь?

[zilker]

<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>

[seniormelikyan]

Большое спасибо