Tema: Caso interesante con validación de formularios
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 17/06/2014, 19:48
Avatar de nanotime
nanotime
 
Fecha de Ingreso: noviembre-2011
Ubicación: Cd. Guayana
Mensajes: 145
Antigüedad: 13 años
Puntos: 6
Respuesta: Caso interesante con validación de formularios
Le hice un lifting al código y traté de hacerlo bastaaaaaaaante mas sencillo, pero sigue sin funcionar del todo

Código Javascript: 
Ver original
  1. function init () {
  2.   document.welcome.addEventListener('valid', watch, true);
  3.   document.querySelector('.button-send').addEventListener('click', send, false);
  4. }
  5.  
  6. function watch (e) {
  7.   var el = e.target;
  8.   var errMsj = document.getElementById('err-msj');
  9.  
  10.   if (el.validity.valid) {
  11.     console.log('Good');
  12.   } else {
  13.     console.log('Warning');
  14.   }
  15.  
  16. }
  17.  
  18. function send () {
  19.  
  20.   var name     = document.querySelector("input[name='fname']"),
  21.       lname    = document.querySelector("input[name='lname']"),
  22.       age      = document.querySelector("input[name='age']"),
  23.       mail     = document.querySelector("input[name='email']"),
  24.       valid    = document.welcome.checkValidity(),
  25.       errMsj   = document.getElementById('err-msj');
  26.     
  27.   if (valid) {
  28.     document.welcome.submit();
  29.   }
  30.   else {
  31.     if (name.validity.valueMissing || lname.validity.valueMissing || age.validity.valueMissing || mail.validity.valueMissing){
  32.       console.log('missing value');
  33.     } else if (name.validity.patternMissMatch || lname.validity.patternMissMatch || age.validity.patternMissMatch){
  34.       console.log('missing pattern');
  35.     } else {
  36.       if ((mail.validity.typeMissMatch)) {
  37.         console.log('type Missing');
  38.       };
  39.     }
  40.   }
  41. }
  42.  
  43. window.addEventListener('load', init, false);

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>Webform</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7.     <script src="js/main.js"></script>
  8.   </head>
  9.   <body>
  10.     <header>
  11.       <h2>Wellcome!</h2>
  12.     </header>
  13.     <section class="form-wrapper">
  14.       <div id="err-msj"></div>
  15.       <form name="welcome" method="post">
  16.         <div class="fields">
  17.           <div class="field">
  18.             <label for="fname">Name:</label>
  19.             <input type="text" name="fname" placeholder="your name here" pattern="[A-Za-z]" required>
  20.           </div>
  21.           <div class="field">
  22.             <label for="lname">Last name:</label>
  23.             <input type="text" name="lname" placeholder="your lastname here" pattern="[A-Za-z]" required>
  24.           </div>
  25.           <div class="field">
  26.             <label for="age">Age:</label>
  27.             <input type="text" name="age" placeholder="your age here" pattern="[0-9]">
  28.           </div>
  29.           <div class="field">
  30.             <label for="mail">Email:</label>
  31.             <input type="text" name="email" placeholder="[email protected]" required>
  32.           </div>
  33.           <div class="radios"><span>Sex:</span>
  34.             <input type="radio" name="male" value="male"><span>Male</span>
  35.             <input type="radio" name="female" value="female"><span>Female</span>
  36.           </div>
  37.           <div class="text">
  38.             <textarea name="message"></textarea>
  39.           </div>
  40.           <div class="button-wrapper">
  41.             <input type="button" name="send" value="Send" class="button-send">
  42.           </div>
  43.         </div>
  44.       </form>
  45.     </section>
  46.   </body>
  47. </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