0

Tengo una cuestión y es que estoy haciendo una validación en la base de datos de sí un usuario o un correo ya ha sido registrado, por lo tanto, esta validación la hago por medio de ajax, pero a la vez también valido que los otros campos estén correctamente diligenciados, la cosa es que cuando mando a hacer la petición en ajax, pues él sigue recorriendo el método y cuando ya obtiene la respuesta de la petición, ya ha recorrido todo el método, entonces no lo toma como un error, ya les adjunto el código para que sea algo más claro:

Método AJAX

function verificar(valor, opcion){
        var url = "/Jomar/inventario_dotacion/controllers/UsuarioController.php?action="; 
        switch(opcion){
            case "1":
                url += "verificarUsu";
                var datos = {
                    "usuario" : valor
                };
                break;
            case "2": 
                url += "verificarCorreo";
                var datos = {
                    "correo" : valor
                };
                break;
        }

        $.ajax({
            url: url,
            data: datos,
            type: "post",
            success: function(response){
                console.log(response);
                if(response.trim() == "1"){
                    return true;
                }else{
                    return false;
                }
            }
        });

    }

Método para validar campos

function validarCampos(){
        var nombres = document.forms["formRegistro"]["nombres"].value.trim();
        var apellidos = document.forms["formRegistro"]["apellidos"].value.trim();
        var correo = document.forms["formRegistro"]["correo"].value.trim();
        var usuario = document.forms["formRegistro"]["usuario"].value.trim();
        var clave = document.forms["formRegistro"]["clave"].value;
        var confirmClave = document.forms["formRegistro"]["confirmClave"].value;        

        var msg = "<ul>";
        var formOk = true;

        if(nombres == ""){
            msg += "<li> Nombres no puede ir vacío </li>";
            formOk = false;
        }        

        if(apellidos == ""){
            msg += "<li> Apellidos no puede ir vacío </li>";
            formOk = false;
        }        

        if(correo == ""){
            msg += "<li> Correo no puede ir vacío </li>";
            formOk = false;
        }else{
            if(correo.indexOf('@') == -1){
            msg += "<li> El correo debe tener @ </li>";
            formOk = false;
            }

            var respuesta;

            if(correo.indexOf('.') == -1){
                msg += "<li> El correo debe tener \".\" </li>";
                formOk = false;
            }else{
                respuesta = verificar(correo, "2");
                if(respuesta){
                    msg += "<li> Correo ya existente </li>";                    
                    formOk = false;
                }
            }
        }        

        if(usuario == ""){
            msg += "<li> Usuario no puede ir vacío </li>";
            formOk = false;            
        }else{
            respuesta = verificar(usuario, "1");
            if(respuesta){
                msg += "<li> Usuario ya existente </li>";                    
                formOk = false;            
            }
        }

        if(clave == ""){
            msg += "<li> Clave no puede ir vacío </li>";
            formOk = false;            
        }        

        if(confirmClave == "" && clave != ""){
            msg += "<li> Tienes que confirmar Clave </li>";
            formOk = false;            
        }else if(clave != confirmClave){            
            msg += "<li> Claves no coinciden </li>" ;
            formOk = false;
        }                
        msg += "</ul>"

        if(!formOk){
            $("#errores").html(msg);
            $("#errores").fadeIn("slow");
        }
        return formOk;
    }

Espero que sea entendible, cualquier duda la soluciono, la cuestión es ¿Cómo hago para validar ese campo con ajax y que no siga recorriendo el método sin haber obtenido respuesta o qué otra forma hay para hacer esto?

6
  • No te sirve la validación que hace html a los input de los formularios?
    – DjCrazy
    el 9 dic. 2019 a las 19:48
  • No entiendo si te refieres a que validarCampos() se llama sin que la petición Ajax haya terminado, no se ve en el código donde la llamas. Si es eso, simplemente llámala desde dentro del succes de Ajax. Aunque me parece raro hacer una validación de campos posterior a una petición Ajax. Generalmente esto se hace antes de la petición, no después. Para entender el contexto y verificar que no aplicas una lógica al revés, ¿qué debería ocurrir si, la validación no pasa? ¿qué harías en ese caso con lo que ya trajiste del servidor vía Ajax dado que la validación es errónea?
    – A. Cedano
    el 9 dic. 2019 a las 19:48
  • Es algo complicado de explicar, pero sí tengo también un problema al acomodar mi lógica, solo que hago validación en validarCampos() entonces ahí mismo quiero validar la existencia de tales datos, porque sí existen me tienen que decir que no envíe ese formulario, y el que da esa orden por decirlo así es validarCampos() pero pues, qué recomendarían?
    – DaxTter77
    el 9 dic. 2019 a las 19:56
  • Recomiendo que hagas justo lo contrario de lo que estás haciendo: 1º Validas los datos; 2º. Si son válidos entonces lanzas la petición Ajax o haces otra cosa como indicar el mensaje "Datos no válidos".
    – A. Cedano
    el 9 dic. 2019 a las 20:34
  • @A.Cedano pero cómo le digo que no se vaya a ejecutar, ya que, sí lo valido a parte no hay forma que le diga a ese metodo que devuelva un false
    – DaxTter77
    el 9 dic. 2019 a las 21:23

2 respuestas 2

2

Editado: corregí algunos detalles

Yo te recomiendo que la verificación de si existe un usuario o correo, la hagas desde el backend osea desde PHP, y devuelvas un objecto JSON en caso de que exista de lo contrario se completa el registro.

Y tu código javascript puede ser de la siguiente forma:

// función para concatenar los errores 
Array.prototype._error = function(value) {
  return this.push("<li>" + value + "</li>");
};
// la función formRegistro simplifica tu código para que no escribas tanto
function formRegistro(value) {
  return document.forms["formRegistro"][value].value.trim();
}
// la función isEmpty válida campos vacíos
function isEmpty(value) {
  return value === "";
}
// la función sendAjax enviara un petición a PHP para verificar 
// si el usuario o correo existe y devuelve un error en caso de que si exista
// de lo contrario el registro sera exitoso
function sendAjax(obj) {
  typeof obj === "object" && $.ajax({
    url: 'url',
    method: 'post',
    data: obj,
    responseType: 'json',
    success: function(result) {
      return result.error ? $("#errores").html(result.error).fadeIn("slow") : alert("Te haz registrado");
    }
  })
}
// con esta función validamos todos los campos
// si existe un error lo concatenamos con la función push al array 'msg'
function validarCampos() {
  var nombres = formRegistro("nombres");
  var apellidos = formRegistro("apellidos");
  var correo = formRegistro("correo");
  var usuario = formRegistro("usuario");
  var clave = formRegistro("clave");
  var confirmClave = formRegistro("confirmClave");

  var msg = [];
  var formOk = false;
  var prefix = "no puede ir vacío";
  // este regex válida que el email tenga un formato correcto
  var regEmail = /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/;

  if (isEmpty(usuario)) {
    msg._error("Usuario " + prefix)
  }
  if (isEmpty(nombres)) {
    msg._error("Nombres " + prefix);
  }
  if (isEmpty(apellidos)) {
    msg._error("Apellidos " + prefix);
  }
  if (isEmpty(correo)) {
    msg._error("Correo " + prefix)
  } else if (!regEmail.test(correo)) {
    msg._error("El correo debe tener un formato valido");
  }
  if (isEmpty(clave)) {
    msg._error("Clave " + prefix);
  }

  if (isEmpty(confirmClave) && !isEmpty(clave)) {
    msg._error("Tienes que confirmar Clave");
  } else if (clave !== confirmClave) {
    msg._error("Claves no coinciden");
  }
  // aquí verificamos que el array 'msg' tenga mas de un valor
  // si tiene valores concatenados entonces mostramos los errores
  if (msg.length > 0) {
    $("#errores").html("<ul>" + msg.join('') + "</ul>").fadeIn("slow");
  } else if (msg.length === 0) {
    // si llegamos hasta aquí, entonces todo es valido y mandamos la petición ajax
    formOk = true;
  }
  return formOk && sendAjax({
    usuario: usuario,
    nombres: nombres,
    apellidos: apellidos,
    correo: correo,
    clave: clave
  });
}

Y desde PHP lo harías de esta forma:

<?php 
  $db = mysqli_connect('localhost', 'root', '', 'db');
  $username = "";
  $email = "";
  $result = [];
  if (isset($_POST['register'])) {
    $username = $_POST['usuario'];
    $email = $_POST['correo'];
    $password = $_POST['clave'];

    $sql_u = "SELECT * FROM users WHERE username='$username'";
    $sql_e = "SELECT * FROM users WHERE email='$email'";
    $res_u = mysqli_query($db, $sql_u);
    $res_e = mysqli_query($db, $sql_e);

    if (mysqli_num_rows($res_u) > 0) {
      $result['error'] = 'El usuario ya existe';
    }else if(mysqli_num_rows($res_e) > 0){
      $result['error'] = "El email ya existe";  
    }else{
           $query = "INSERT INTO users (username, email, password) 
                  VALUES ('$username', '$email', '".md5($password)."')";
           $results = mysqli_query($db, $query);
           $result['ok'] = true;
           exit();
    }
        echo json_encode($result);
  }
?>
1
  • Está muy buena tu respuesta, solo que el problema es que me tocaría modificar mucho de lo que ya llevo hecho, de igual manera, muchas gracias por tu aporte la tendré en cuenta
    – DaxTter77
    el 10 dic. 2019 a las 14:06
2

seria mejor que investigues sobre promesas y callback de javascript, ya que las peticiones son no se esperan, una forma puede ser usando async - await

De esta forma

Primero decimos que devolveremos algo

function verificar(valor, opcion){
    var url = "/Jomar/inventario_dotacion/controllers/UsuarioController.php?action="; 
    //... resto de código
    return $.ajax({
        url: url,
        data: datos,
        type: "post",
        success: function(response){
            console.log(response);
            if(response.trim() == "1"){
                existe = true;
            }else{
                existe = false;
            }
        }
    });

}

Con esto, se vuelve una promesa

Y ahora usamos async - await ya que sabemos que la pericion ajax toma tiempo y le decimos que espere

async function validarCampos(){
    //... codigo
    if(usuario == ""){
        msg += "<li> Usuario no puede ir vacío </li>";
        formOk = false;            
    }else{
        await verificar(usuario, "1");
        if(existe){
            msg += "<li> Usuario ya existente </li>";                    
            formOk = false;            
        }
    }
    //...codigo
}

Ademas

return true;//los callback, no devuelven nada

Crea una Variable global, tu script quedaria algo así

var existe=false;
function verificar(valor, opcion){
    //...
}
async function validarCampos(){
    //...
}
3
  • Muchas gracias, está muy buena la respuesta, aunque tengo un problema, así sea que retorne falso o verdadero, él lo toma como verdadero siempre y se envía el formulario
    – DaxTter77
    el 10 dic. 2019 a las 14:03
  • en ese caso creamos una variable, y es la cual se usará para eso, modifiqué para ver como quedaria el 10 dic. 2019 a las 17:06
  • La verdad es que sigo teniendo el mismo problema
    – DaxTter77
    el 10 dic. 2019 a las 19:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.