В "контроллере" примерно такая система
var fields={}, /* здесь все те самые поля-объекты */
validate=function(e) { /* это самое и вешается на всякие там события у полей */
var f=fields[this.name];
if(f.error) { /* если уже был косяк то стереть */
f.el.title=f.title;
f.el.classList.remove('invalid');
f.error=null;
}
try {
f.validate();
}
catch(err) {
submit.disabled=f.error=true;
if(e.type!='input') { /* рендерит ошибку если сработало по событию, по вызову из скрипта - нет */
f.title=f.el.title;
f.el.title=err;
f.el.classList.add('invalid');
}
}
},
То есть весь рендер заключается в обвести поле красной рамкой и поменять его title чтоб чел мог подвести мышь и почитать что надо сделать.
Я проверял несколько дизайнов сообщений об ошибках и пришел к выводу что такой - самый лучший. Он кстати с нативным полностью совпадает как вы уже поняли.