Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/03/2016, 05:44
Kuina
 
Fecha de Ingreso: marzo-2016
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Validación de formularios sin alert

He creado un formulario y su correspondiente validación usando .innerHTML y la validación va bien solo que cuando el campo es correcto quiero que desaparezca y no se como hacerlo. No se si me explico bien. Este es el codigo que he usado.
Código HTML:
Ver original
  1. <form onsubmit="return validar()">
  2.             <table>
  3.                 <tr>
  4.                     <td>
  5.                         <label for="nombre">Nombre:</label>
  6.                     </td>
  7.                     <td>
  8.                         <input type="text" id="nombre" name="nombre"/>
  9.                     </td>
  10.                 </tr>
  11.                 <tr>
  12.                     <td></td>
  13.                     <td>
  14.                         <div id="validacion_nombre" class="error"></div>
  15.                     </td>
  16.                 </tr>
  17.                 <tr>
  18.                     <td>
  19.                         <label for="apellidos">Apellidos:</label>
  20.                     </td>
  21.                     <td>
  22.                         <input type="text" id="apellidos" name="apellidos"/>
  23.                     </td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td></td>
  27.                     <td>
  28.                         <div id="validacion_apellidos" class="error"></div>
  29.                     </td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>
  33.                         <label for="edad">Edad:</label>
  34.                     </td>
  35.                     <td>
  36.                         <input type="text" id="edad" name="edad"/>
  37.                     </td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td></td>
  41.                     <td>
  42.                         <div id="validacion_edad" class="error"></div>
  43.                     </td>
  44.                 </tr>
  45.                 <tr>
  46.                     <td>
  47.                         <label for="telefono">Telefono:</label>
  48.                     </td>
  49.                     <td>
  50.                         <input type="text" id="telefono" name="telefono"/>
  51.                     </td>
  52.                 </tr>
  53.                 <tr>
  54.                     <td>
  55.                         <input type="submit">
  56.                     </td>
  57.                 </tr>
  58.             </table>
  59.         </form>

Y el javascript

Código Javascript:
Ver original
  1. function validar(){
  2.     //Nombre
  3.     var nombre = document.getElementById('nombre').value;
  4.     var val_nom = document.getElementById('validacion_nombre');
  5.     //Apellidos
  6.     var apellidos = document.getElementById('apellidos').value;
  7.     var val_ap = document.getElementById('validacion_apellidos');
  8.     //Edad
  9.     var edad = document.getElementById('edad').value;
  10.     var val_ed = document.getElementById('validacion_edad');
  11.    
  12.     //Validación del campo nombre
  13.     if(nombre.length == 0 || nombre == null || nombre.match(/^\s+$/)){
  14.         val_nom.innerHTML = "Campo obligatorio"
  15.         return false;
  16.     }
  17.     else if(!nombre.match(/^[a-zA-Z]+$/)){
  18.         val_nom.innerHTML = "Este campo solo debe contener texto.";
  19.         return false;
  20.     }
  21.    
  22.     //Validacion del campo apellido
  23.     else if(apellidos.lenght == 0 || apellidos == null || apellidos.match(/^\s+$/)){
  24.             val_ap.innerHTML = "Campo obligatorio";
  25.             return false;
  26.     }
  27.     else if(!apellidos.match(/^[a-zA-Z]+$/)){
  28.         val_ap.innerHTML = "Introduce solo texto"
  29.         return false;
  30.     }
  31.    
  32.     //Validacion del campo de edad
  33.     else if(edad.lenght == 0 || edad == null || edad.match(/^\s+$/)){
  34.             val_ed.innerHTML = "Campo obligatorio";
  35.             return false;
  36.     }
  37.     else if(!edad.match(/^[0-9]+$/)|| edad < 0 || edad > 150){
  38.         val_ed.innerHTML = "Introduce una edad valida";
  39.         return false;
  40.     }
  41. return true;
  42. }