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<form onsubmit="return validar()"> <input type="text" id="nombre" name="nombre"/> <div id="validacion_nombre" class="error"></div> <input type="text" id="apellidos" name="apellidos"/> <div id="validacion_apellidos" class="error"></div> <input type="text" id="edad" name="edad"/> <div id="validacion_edad" class="error"></div> <input type="text" id="telefono" name="telefono"/>
Y el javascript
Código Javascript
:
Ver originalfunction validar(){
//Nombre
var nombre = document.getElementById('nombre').value;
var val_nom = document.getElementById('validacion_nombre');
//Apellidos
var apellidos = document.getElementById('apellidos').value;
var val_ap = document.getElementById('validacion_apellidos');
//Edad
var edad = document.getElementById('edad').value;
var val_ed = document.getElementById('validacion_edad');
//Validación del campo nombre
if(nombre.length == 0 || nombre == null || nombre.match(/^\s+$/)){
val_nom.innerHTML = "Campo obligatorio"
return false;
}
else if(!nombre.match(/^[a-zA-Z]+$/)){
val_nom.innerHTML = "Este campo solo debe contener texto.";
return false;
}
//Validacion del campo apellido
else if(apellidos.lenght == 0 || apellidos == null || apellidos.match(/^\s+$/)){
val_ap.innerHTML = "Campo obligatorio";
return false;
}
else if(!apellidos.match(/^[a-zA-Z]+$/)){
val_ap.innerHTML = "Introduce solo texto"
return false;
}
//Validacion del campo de edad
else if(edad.lenght == 0 || edad == null || edad.match(/^\s+$/)){
val_ed.innerHTML = "Campo obligatorio";
return false;
}
else if(!edad.match(/^[0-9]+$/)|| edad < 0 || edad > 150){
val_ed.innerHTML = "Introduce una edad valida";
return false;
}
return true;
}