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!

[Italico76]

Bueno... agregando el <FORM> ya al menos desaparece ese error:

Código Javascript:

<form name="welcome">
<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>
</form>
 

[nanotime]

Iniciado por Italico76

Bueno... agregando el <FORM> ya al menos desaparece ese error:

Código Javascript:

<form name="welcome">
<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>
</form>
 

de hecho, el form existe, solo que no lo copie

[Italico76]

Iniciado por nanotime

de hecho, el form existe, solo que no lo copie

Y por que no copias completo el documento incluidas las llamadas a librerias asi nos ahorramos en trabajito de completarlo para depurar el script ?

[nanotime]

Pues hice un par de cambios en el JS y dejo entonces el html:

Código HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webform</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
  </head>
  <body>
    <header>
      <h2>Wellcome!</h2>
    </header>
    <section class="form-wrapper">
      <form name="welcome" method="post">
        <div class="fields">
          <div class="field">
            <label for="fname">Name:</label>
            <input type="text" name="fname" placeholder="your name here" pattern="[A-Za-z]" required>
            <div id="name-err"></div>
          </div>
          <div class="field">
            <label for="lname">Last name:</label>
            <input type="text" name="lname" placeholder="your lastname here" pattern="[A-Za-z]" required>
            <div id="lname-err"></div>
          </div>
          <div class="field">
            <label for="age">Age:</label>
            <input type="text" name="age" placeholder="your age here" pattern="[0-9]">
            <div id="age-err"></div>
          </div>
          <div class="field">
            <label for="mail">Email:</label>
            <input type="text" name="email" placeholder="[email protected]" required>
            <div id="mail-err"></div>
          </div>
          <div class="radios"><span>Sex:</span>
            <input type="radio" name="male" value="male"><span>Male</span>
            <input type="radio" name="female" value="female"><span>Female</span>
          </div>
          <div class="text">
            <textarea name="message"></textarea>
          </div>
          <div class="button-wrapper">
            <input type="button" name="send" value="Send" class="button-send">
          </div>
        </div>
      </form>
    </section>
  </body>
</html>
 

Ahora, el JS:

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('Algo está mal .... ');
    console.log(el);
  }
}
 
function send(){
  var valid = document.welcome.checkValidity();
  if(valid){
    document.welcome.submit();
  } else {
    console.log('nooope');
  };
}
 
window.addEventListener('load', init, false);
 

Bien, el tema con el document.welcome era que en el evento de carga que inicializaba todo tenía mal referenciada la clase init... todo listo por ese lado.

Hice un par de logs tontos para saber si se saltaba los condicionales y, en efecto, se los salta...

De hecho al interactuar con los campos no pasa gran cosa, de hecho no pasa nada, no muestra los mensajes no cambia en absolutamente nada (cosa que en teoría debería ocurrir a medida que te vas equivocando en los campos).

Si trato de enviar el formulario sin llenar los cambios, efectivamente me dispara el log que le puse. Si relleno los campos mal, me lanza los logs (menos el de email...) y luego, obviamente el 'nooope' tonto de pruebas.

En fin, al menos ya comprobé que las referencias para hacer las comparaciones son correctas, logeando el.name me devuelve el valor de name y así... ¿Qué está mal entonces en el script? Es mi pregunta ahora

Edito:

Ah! Se me olvidaba poner los logs, claro

Código Javascript:

"Algo está mal .... "
<input type="text" required="" pattern="[A-Za-z]" placeholder="your name here" name="fname">
"Algo está mal .... " 
<input type="text" required="" pattern="[A-Za-z]" placeholder="your lastname here" name="lname">
"Algo está mal .... " 
<input type="text" pattern="[0-9]" placeholder="your age here" name="age">
"nooope"
 

[nanotime]

Le hice un lifting al código y traté de hacerlo bastaaaaaaaante mas sencillo, pero sigue sin funcionar del todo

Código Javascript:

function init () {
  document.welcome.addEventListener('valid', watch, true);
  document.querySelector('.button-send').addEventListener('click', send, false);
}
 
function watch (e) {
  var el = e.target;
  var errMsj = document.getElementById('err-msj');
 
  if (el.validity.valid) {
    console.log('Good');
  } else {
    console.log('Warning');
  }
 
}
 
function send () {
 
  var name     = document.querySelector("input[name='fname']"),
      lname    = document.querySelector("input[name='lname']"),
      age      = document.querySelector("input[name='age']"),
      mail     = document.querySelector("input[name='email']"),
      valid    = document.welcome.checkValidity(),
      errMsj   = document.getElementById('err-msj');
    
  if (valid) {
    document.welcome.submit();
  }
  else {
    if (name.validity.valueMissing || lname.validity.valueMissing || age.validity.valueMissing || mail.validity.valueMissing){
      console.log('missing value');
    } else if (name.validity.patternMissMatch || lname.validity.patternMissMatch || age.validity.patternMissMatch){
      console.log('missing pattern');
    } else {
      if ((mail.validity.typeMissMatch)) {
        console.log('type Missing');
      };
    }
  }
}
 
window.addEventListener('load', init, false);
 

Código HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webform</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
  </head>
  <body>
    <header>
      <h2>Wellcome!</h2>
    </header>
    <section class="form-wrapper">
      <div id="err-msj"></div>
      <form name="welcome" method="post">
        <div class="fields">
          <div class="field">
            <label for="fname">Name:</label>
            <input type="text" name="fname" placeholder="your name here" pattern="[A-Za-z]" required>
          </div>
          <div class="field">
            <label for="lname">Last name:</label>
            <input type="text" name="lname" placeholder="your lastname here" pattern="[A-Za-z]" required>
          </div>
          <div class="field">
            <label for="age">Age:</label>
            <input type="text" name="age" placeholder="your age here" pattern="[0-9]">
          </div>
          <div class="field">
            <label for="mail">Email:</label>
            <input type="text" name="email" placeholder="[email protected]" required>
          </div>
          <div class="radios"><span>Sex:</span>
            <input type="radio" name="male" value="male"><span>Male</span>
            <input type="radio" name="female" value="female"><span>Female</span>
          </div>
          <div class="text">
            <textarea name="message"></textarea>
          </div>
          <div class="button-wrapper">
            <input type="button" name="send" value="Send" class="button-send">
          </div>
        </div>
      </form>
    </section>
  </body>
</html>
 

Acá el cambio es que en vez de volverme loco tratando de disparar un aviso distinto por cada error en forma de caja, lo hago (de forma simulada con logs, por los momentos) con una sola caja que avisa que hay errores en las casillas marcadas (en este caso, lo hago con la pseudo clase :invalid de css) ... o bueno, se supone que debería ir lanzando un log a medida que se equivoca un campo, cosa que no pasa en la función watch.

Respecto a la función send() pues hay un comportamiento extraño. Se supone que cuando se hace click en el botón para enviar el formulario, se activa el condicional que evalúa: si el formulario es válido, envíalo, sino lanza alguna de estas excepciones (los if anidados).

Nada de esto pasa, el único evento que se dispara es si hay un campo vacío, mas allá de eso no se evalúa nada a menos que cambie el tipo de botón button por submit y ahí más o menos empieza a validar, pero sigue sin disparar otros eventos, me dice siempre el mismo log de "value is missing" aunque haya un patternMissMatch. Además, siempre me muestra las cajas de comentarios feas y no hay manera de sacarlas.

Al parecer validar del lado del cliente con la API HTML5 no es tan simple