Validación de formulario instantaneo con jQuery

publicado por: Anonymous

me acabo de registar y necesito resolver un pequeño problema.Ante que nada el code funciona, la duda es que en los campos de password si yo modifico la contraseña ya habiendo ingresado la confirmación de la contraseña, crea un bug y no actualiza el mensaje del error de la confirmación de la contraseña. Yo creo que se puede deber a que estoy utilizando la funcion keyup, cual deberia usar o me recomendaria para mejorar el codigo.

Desde ya muchas gracias!
introducir la descripción de la imagen aquí
introducir la descripción de la imagen aquí

 function validInput(input){
    var type = $(input).attr('type');
    var id = $(input).attr('id');
    var error=false;
    var msg= "";
    var str_e = /^[a-zA-Z0-9_.-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$/;
    if(id === "name"){
        if (input.val().length === 0) {
        error=true;
        msg= "Porfavor ingresa un nombre";
        }else if(input.val().length > 30){
        error=true;
        msg= "El nombre es muy largo";
        }
    }else if(id === "lastname"){
        if (input.val().length === 0) {
        error=true;
        msg= "Porfavor ingresa un apellido";
        }
    }else if(id === "pass"){
        if (input.val().length === 0){
        error=true;
        msg= "Porfavor ingresa una contraseña";
        }
    }else if(id === "pass2"){
        if (input.val() !== $('#pass').val()){
        error=true;
        msg= "Las contraseña no coinciden";
        }
    }else if(id === "email"){
        if (input.val() === 0 || !str_e.test(input.val())) {
        error = true;
        msg = "Corre electrónico invalido.";
        }
    }

    if (error=== true) {
        input.removeClass().addClass('error-input');
        input.next().removeClass().addClass("error");
        var next = input.next('.error');
        $(next).children(".msg").text(msg);
    }else{

        input.removeClass().addClass('succes-input');
        input.next().removeClass().addClass("succes");
        var next = input.next('.succes');
        $(next).children(".msg").text();
    }
    return input;

}

 $('input').keyup(function(){
    validInput($(this));
 });

solución

No actualiza el mensaje dado que no verificas que sea igual o diferente con pass2 , tal y como lo haces cuando el id === "pass2" , ahí validas que sea diferente con

if (input.val() !== $('#pass').val()){...}

Parecido debes hacer cuando el id es pass , además tomar en cuenta que cuando el id sea pass2 , no se valida que no esté vacío el campo

else if(id === "pass"){
    if (input.val().length === 0){
    error=true;
    msg= "Porfavor ingresa una contraseña";
    }
    else if (input.val() !== $('#pass2').val()){
        error=true;
        msg= "Las contraseña no coinciden";
    }
}else if(id === "pass2"){
    if (input.val().length === 0){
    error=true;
    msg= "Porfavor ingresa una contraseña";
    }
    else if (input.val() !== $('#pass').val()){
    error=true;
    msg= "Las contraseña no coinciden";
    }
}

Recomendación : Qué usar? , Una opción sería usar el Evento focusout para validar cada vez que se pierde el Focus de los Input , aunque el evento usado es válido si quieres hacer la validación en tiempo Real

$('input').focusout(function(){
    validInput($(this));
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *