6

Quiero verificar si un valor ingresado en el input #rol_nombre no se encuentra en la base de datos para poder almacenarlo.

input

<div class="field">
   <div class="ui corner labeled input">
   <input type="text" placeholder="Nombre." name="rol_nombre" id="rol_nombre">;
   <div class="ui corner label">
   <i class="asterisk icon"></i>
   </div>
   </div>
</div>

backend

Cuando encuentra un registro con el mismo nombre retorna false.

findByName: async (req, res) => {
        let rows = await Rol.findByName(req.query.key);
        if (rows.length > 0) {
            res.send(false);
        } else {
            res.send(true);
        }
    }

script del formulario

$(() => {
        $.fn.form.settings.rules.myCustomRule = function (param) {
            $.ajax({
                url: `/rol/search?key=${param}`,
                success: function (respuesta) {
                    console.log(respuesta);
                    return respuesta;
                },
                error: function () {
                    console.log("No se ha podido obtener la información");
                }
            });
        }
        $('#frm-rol').form({

            rol_nombre: {
                identifier: 'rol_nombre',
                rules: [
                    { type: 'empty', prompt: 'Ingrese un nombre' },
                    { type: 'maxLength[45]', prompt: 'Debe ingresar maximo 10 caracteres' },
                    { type: 'myCustomRule[nombre]', prompt: 'El nombre ya fue registrado' }
                ]
            }

        })
    });

El problema parece ser durante el retorno de la respuesta en la función myCustomRule, se supone que si recibe el true de mi petición ajax debería continuar con el registro, pero no lo hace, el console.log(respuesta) ejecutado en el success imprime correctamente la respuesta que recibe del backend pero a mi criterio myCustomRule no recibe el true del ajax.

6
  • O algún lugar donde pueda obtener información al respecto ? Commented el 26 jun. 2019 a las 3:55
  • y si en vez de enviar el true como boleano desde el backend lo envias como string "true" y una compracion sencilla como if(response == "true")//... Commented el 2 jul. 2019 a las 4:15
  • dentro de $.fn.form.settings.rules.myCustomRule = function (param) { } funciona si retorno directamente true, pero si ese true lo devuelvo dentro de una función, ya no vale. Commented el 2 jul. 2019 a las 5:25
  • Utiliza la funciones de flecha, $.fn.form.settings.rules.myCustomRule = param=> { } Commented el 2 jul. 2019 a las 14:46
  • 1
    Tu problema es de sincronía. En la documentación de Semantic-UI, especifica claramente que: (traducción propia) Puedes extender la validación del formulario para incluir tus propias reglas. Ten en cuenta que esto necesariamente se debe realizar de forma sincrónica. Con esto ya tienes una idea de lo que está sucediendo. Las llamadas AJAX son asíncronas. Saludos Commented el 6 jul. 2019 a las 20:32

2 respuestas 2

2

La cuestión es que myCustomRule es de quien se espera la respuesta true o false para dar por válida la regla.

Pero myCustomRule, al llamar a $.get invoca una operación asincrónica, por lo tanto una vez que llamó a $.get, la función sigue adelante y termina.

La respuesta al $.get se procesa con la función pasada como lambda y se ejecuta más adelante cuando se reciben los datos de la respuesta, pero para este momento ya la validación de myCustomRule terminó.

Alternativas que se pueden evaluar:

En lugar de $.get usar $.ajax con async:false. En el callback de success setear una variable del contexto de myCustomRule y luego evaluar ese resultado:

$.fn.form.settings.rules.myCustomRule = function (param) {  
    let rol_state = -1;
    $.ajax({
        url : `/rol/search?key=${param}`,
        type : "get",
        async: false,
        success : function(data) {
            rol_state = data.rol_state;
        },
        error: function() {
           connectionError();
        }
    });

    if (rol_state == -1) {
       console.log('Error no contemplado');
       return false;
    }else if (rol_state == 1) {
       console.log('Registrado y activo');
       return false;
    } else if (rol_state == 0) {
       console.log('Registrado pero esta inactivo');
       return false;
    } else {
       console.log('No existe coincidencias');
       return true;
    }

}

Hacer que la llamada sea sincrónica puede trer otros problemas (Por este motivo, si bien la opción existe, está deprecada) por lo que me inclinaría mas por otra solución. Por ejemplo:

I. En lugar de usar un botón de submit en el formulario, utilizar un botón que se encargue de hacer la llamada de ajax (asincrónica).
Y luego, en el callback de success, de esa llamada, si el nombre no existe, hacer el submit del formulario por programa.

o II. Quitar la validación de myCustomRule e implementarla aparte como una precondición para poder habilitar el botón de submit del formulario:

Cuando se ingresa el nombre, esperar a que se termine de escribir, y ejecutar el $.get(). En el callback de success, mostrar el error si ya existe el nombre, o habilitar el botón de submit del formulario si se verificó que el nombre no existe.

2
  • Estimado gracias por la respuesta, ingreso un valor que ya existe en la base de datos y en la consola obtengo el mensaje (Registrado y activo) por lo tanto no debería registrarse la información, pero lo hace. Commented el 11 jul. 2019 a las 20:53
  • Si sale ese log en la consola, la función está devolviendo false como debería. Fijate si en la consola sale algún otro error.
    – Juan
    Commented el 11 jul. 2019 a las 21:38
2

El problema es que myCustomRule devuelve undefined, ya que no haces ningún return.

Para poder manejar $.ajax, de forma sincrónica y poder usarlo como validador, podés usar Async/Await:

$.fn.form.settings.rules.myCustomRule = async param => {
  let isValid;
  try {
    isValid = await $.ajax({
      url: `/rol/search?key=${param}`
    });
  } catch (err) {
    isValid = false;
  }

  return isValid;
};
1
  • amigo gracias, pero aun así el formulario se sigue enviando y no sucede nada Commented el 11 jul. 2019 a las 20:46

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.