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