Caso interesante con validación de formularios

[nanotime]

Digamos que estamos validando un formulario con Javascript y la API HTML5 para formularios, validityState, checkValidity etc... yo lo estoy intentando pero quiero llevarlo un pasito mas allá que simplemente validar en tiempo real cambiándole los colores a un input no válido, quiero agregar en ese mismo tiempo real alertas con cajas de mensajes (puede que no lo haga sino que sea mas diferido, cuando haga click en enviar, lo del tiempo real no es importante).

La cosa es que lo estoy haciendo en puro vanilla JS, primero. Luego usaré Jquery y otras librerías puesto que con esto quiero sacar unos benchs a ver cual es mas eficiente (vanilla, obviamente) y cuantas ops/sec hace cada script.

En fin mi duda está en como hacer para ir apareciendo los mensajes correspondientes en el input errado. Lo primero y principal es, claro está, el trigger del evento:

Código Javascript:

document.welcome.addEventListener('invalid', validate, true);
 

La forma lógica de trabajarlo sería así:

Código Javascript:

function validate(e) {
    var elem = e.target;
 
    if(elem.validity.valid){
      .... foo bar
    }
}
 

He estado investigando y si bien sé que target es un atributo del evento que seleccionará el elemento (input en este caso) que esté fallando, no se como compararlo ya que no se si devuelve una referencia.

Me explico un poco más:

Lo que realmente quiero es poder comprobar cual es el elemento que está fallando para activar el div correspondiente debajo del input. Hay varias maneras de tener dispuestas las cajas, puedo o tener un div listo con la clase y mantenerle el display: none y cambiarle luego los atributos, cambiarle la clase o hasta crear un nuevo elemento y ponerlo al final, la cosa es saber cual input falla para poner debajo de la caja con el mensaje.

So, si tengo este html:

Código HTML:

<div class="fields">
        <div class="field">
          <label for="fname">Name:</label>
          <input type="text" name="fname" placeholder="your name here" required>
          <div id="name" class="flash"></div>
        </div>
 

necesito entonces saber si mi input[name="fname"] es el target que falla para poner a funcionar el div#name.flash por poner un ejemplo.

¿Como hago la comparación? ¿Puedo extraer del elemento target algo así como su campo name? ¿Puedo hacer una simple comparación entre element == document.querySelector("input[name='fname'] ... ")? Ahí es donde radica mi duda

edito:

Pues hasta ahora investigando se supone que puedo acceder a los elementos del DOMTree en un evento como cualquier otro elemento (en teoría), codee este script básico a ver que tal va, este es:

Código Javascript:

function init() {
  document.welcome.addEventListener('invalid', validate, true);
  document.querySelector('.button-send').addEventListener('click', send, false);
}
 
function validate(e) {
  var el = e.target;
 
  var elem = {
    name : document.querySelector("input[name='fname']"),
    lname: document.querySelector("input[name='lname']"),
    age  : document.querySelector("input[name='age']"),
    mail : document.querySelector("input[name='mail']")
  };
  
  var sel = {
    name : document.getElementById('name-err'),
    lname: document.getElementById('lname-err'),
    age  : document.getElementById('age-err'),
    mail : document.getElementById('mail-err')
  };
 
  if(el.validity.valueMissing){
    if(el.name == elem.name.name) {
      sel.name.classList.add('flash');
      sel.name.innerHTML = "<p>Please fill the empty field<p>";
    } else if(el.name == elem.lname.name){
      sel.lname.classList.add('flash');
      sel.name.innerHTML = "<p>Please fill the empty field<p>";
    } else if(el.name == elem.age.name){
      sel.age.classList.add('flash');
      sel.name.innerHTML = "<p>Please fill the empty field<p>";
    } else {
      sel.mail.classList.add('flash');
      sel.name.innerHTML = "<p>Please fill the empty field<p>";
    }
  }
  else if(el.validity.typeMissMatch){
    if(el.name == elem.main.name)
      sel.mail.classList.add('flash');
      sel.mail.innerHTML = "<p>Please enter a valid mail<p>";
  } 
  else if(el.validity.patternMissMatch){
    if(el.name == elem.name.name) {
      sel.name.classList.add('flash');
      sel.name.innerHTML = "<p>Please, insert just text<p>";
    } else if(el.name == elem.lname.name){
      sel.lname.classList.add('flash');
      sel.name.innerHTML = "<p>Please, insert just text<p>";
    } else if(el.name == elem.age.name){
      sel.age.classList.add('flash');
      sel.name.innerHTML = "<p>Sure is your age?<p>";
    }
  } else {
    console.log('alo?');
  }
}
 
function send(){
  var valid = document.welcome.checkValidity();
  if(valid)
    document.welcome.submit();
}
 
window.addEventListener('load', init(), false);
 

Solo hay una cuestión, me dice "TypeError: document.welcome is undefined"... lo raro (y divertido) es que si accesa a document.welcome desde la consola JS de firefox/chrome sin líos, mas no desde el script ._____.

Aún no he podido probarlo, no encuentro la razón de ese error.

A cualquier idea, opinión y respuesta ... muchas gracias!