В общем вот рабочий пример, проще буквально некуда, но в нем есть все, что нужно для счастья.
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<br/>
<style>
.errlog{
outline:1px solid #eee;
}
</style>
<form id="feedback" method="get" action="" novalidate autocomplete="off">
<label>Ваше русское имя
<input name="fullname" required="required" type="text" placeholder="ФИО"
pattern="[а-яёА-ЯЁ]{2,12}"
e="Соблюдайте формат имени: от 2 до 12 русских букаф" /></label>
<br/><br/>
<label>Номер телефона
<input name="phone" required="required" type="tel" placeholder="+7(777)777-77-77"
pattern="^(?:\+7|8)[\s|-]*[\(]?\d{3}?[\)]?[\s|-]*\d{3}[\s|-]*\d{2}[\s|-]*\d{2}$"
e="Неправильно набран номер, неправильно набран номер, бип-бип-бип" /></label>
<br/><br/>
<label>Электронный адрес
<input name="email" type="email" required="required" type="email" placeholder="МЫЛО"
pattern="^[a-z0-9_\.\-]+@[a-z0-9_\.\-]+\.[a-z\.]{2,6}$"
e="Соблюдайте формат имейл: some@example.com" /></label>
<br/><br/>
<input type="submit" value="PostIt"/>
<br/><br/>
<div class="errlog"></div>
</form>
<script>
var Form = new function(){
var form=document.getElementById('feedback'),
fields=form.elements,
errout=form.querySelector('.errlog'),errlog,
validate=function(ev){
errout.innerHTML='';
errlog=[];
for(var i=0;i<fields.length;i++){
var f=fields[i];
p=f.getAttribute('pattern'),
r=f.getAttribute('required'),
v=f.value;
if(f.name && r && p && !new RegExp(p).test(v))
errlog.push(f.parentNode.textContent+': '+f.getAttribute('e'));
}
if(errlog.length) {
ev.preventDefault();
errout.innerHTML='<ul><li>'+errlog.join('</li><li>')+'</li></ul>';
}
/* below line just for test purpose */
else {ev.preventDefault(); alert('Поздравляем! Все заполнено правильно!');}
};
form.addEventListener('submit',validate);
this.form=form;
};
</script>
</body>
</html>