[SOLUCIONADO] Validación de formularios sin alert

[Kuina]

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:

<form onsubmit="return validar()">
            <table>
                <tr>
                    <td>
                        <label for="nombre">Nombre:</label>
                    </td>
                    <td>
                        <input type="text" id="nombre" name="nombre"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_nombre" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="apellidos">Apellidos:</label>
                    </td>
                    <td>
                        <input type="text" id="apellidos" name="apellidos"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_apellidos" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="edad">Edad:</label>
                    </td>
                    <td>
                        <input type="text" id="edad" name="edad"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_edad" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="telefono">Telefono:</label>
                    </td>
                    <td>
                        <input type="text" id="telefono" name="telefono"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit">
                    </td>
                </tr>
            </table>
        </form>
 

Y el javascript

Código Javascript:

function 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;
}
 

[xfxstudios]

no se si es lo que buscar, pero prueba asi y adaptalo:

Código HTML:

<form onsubmit="return validar()">
            <table>
                <tr>
                    <td>
                        <label for="nombre">Nombre:</label>
                    </td>
                    <td>
                        <input type="text" id="nombre" name="nombre" onChange="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_nombre" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="apellidos">Apellidos:</label>
                    </td>
                    <td>
                        <input type="text" id="apellidos" name="apellidos" onChange="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_apellidos" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="edad">Edad:</label>
                    </td>
                    <td>
                        <input type="text" id="edad" name="edad" onChange="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <div id="validacion_edad" class="error"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="telefono">Telefono:</label>
                    </td>
                    <td>
                        <input type="text" id="telefono" name="telefono" onChange="validar(this.id);"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit">
                    </td>
                </tr>
            </table>
        </form>
 

Código Javascript:

function validar(X){
 
var ar = ["carlos","quintero","30","telefono"];
 
var valor = $("input[id="+X+"]").val();
 
var index = $.inArray(valor,ar);
 
if(index > -1){
 
    $("input[id="+X+"]").hide(500);
  $("#validacion_"+X).html("");
 
 
}else{
$("#validacion_"+X).html("No existe esa información");
$("#validacion_"+X).attr('class','noesta');
}
 
 
}
 

Código CSS:

.noesta{
  color:#fff;
  background-color:red;
}
 

MUESTRA: https://jsfiddle.net/xfxstudios/4q1fh3j8/

[Kuina]

No. No era eso. Me he explicado mal. Quiero un formulario con validaciones normales que cuado el campo sea incorrecto lo diga y cuando sea correcto no diga nada. El problema de mi codigo es que cuando es incorrecto lo dice pero al coregirlo se queda el mensaje de error.

[Alexis88]

Como las condiciones se ejecutan una tras otra, podrías ocultar el mensaje actual en la siguiente condición, así, hasta el final.

Código Pseudocódigo:

SI condición1 ENTONCES
    Instrucciones
SI NO
    SI condición2 ENTONCES
        Ocultas el mensaje generado en la condición1
        Instrucciones
        ...
 

[xfxstudios]

si observas lo que te coloque es cuestion de modificar un poco el codigo y ará lo que quieres, tan simple como eso, tampoco podemos hacer un codigo completo o una funcion completa por cada peticion porque asi no se aprende, analiza la funcion, adaptala y verás que logras tu cometido, a la final no es tan complicado lo que te indico

[Kuina]

Sobre poner un condicional else para hacerlo desaparecer o un else if lo probe pero no funciona porque deja de validar alli y no sigue con el resto. Sobre lo otro el que estoy empezando a aprender ahora con videotutoriales y aun no he llegado a la paerte de jquery. Ya lo mirare de nuevo entonces.

[xfxstudios]

olvidalo, prueba asi:

MUESTRA: https://jsfiddle.net/xfxstudios/4q1fh3j8/3/

como veras en el ejemplo si tabulas sin escribir nada te marca el error y al escribir lo elimina, al igual que cuando envias

Saludos

[xfxstudios]

Iniciado por Kuina

Sobre lo otro el que estoy empezando a aprender ahora con videotutoriales y aun no he llegado a la paerte de jquery. Ya lo mirare de nuevo entonces.

tienes razón disculpa

[Alexis88]

Iniciado por Kuina

Sobre poner un condicional else para hacerlo desaparecer o un else if lo probe pero no funciona porque deja de validar alli y no sigue con el resto [...]

Es que no se trata de que añadas bloques else if; tienes que usar los que ya tienes.

[Kuina]

Muchas gracias. Ahora si que funciona.