1

buen dia, necesito una orientación para saber que estoy haciendo mal, tengo un array

var detallesImei= [
  { imei1: 'aaaa', imeip: '1' },
  { imei1: 'aaaal', imeip: '1' }
];

quiero validar con jquery validate si el dato que voy a enviar en el formulario existe en el array, lo estoy haciendo de esta manera,

rules: {

  imei1:{
    existeI: function(element) {

var existeI = detallesImei.some(element1 => element1.imei1 === $( "#imei1" ).val());

return existeI;

   }

    }

    },

de esta manera me devuelve un booleano pero no funciona me da el siguiente error Uncaught TypeError: Cannot read property 'call' of undefined. Exception occurred when checking element imei1, check the 'existeI' method. que estoy haciendo mal.

1
  • No estás creando correctamente la función, encierra element1 entre paréntesis: detallesImei.some((element1) => element1.imei1 === $( "#imei1" ).val());
    – Triby
    Commented el 1 jun. 2020 a las 3:14

1 respuesta 1

1

PROBLEMA

Sucede que no estás usando correctamente el plugin JQuery Validation. Para lograr crear la validación, debes pasar el método como argumento de la función addMethod() y no como elemento del objeto rules.

SOLUCIÓN

Veamos una forma de implementar correctamente tu validación.

Deseas validar que el valor introducido en algún elemento tipo input identificado por #imei1 no se repita en los elementos de tu lista detallesImei.

Entonces, lo que debes hacer es crear un método que te diga si el valor introducido en el input ya existe en la lista. Este método no lo vas a agregar en las reglas del validador, sino que lo vas a agregar en el objeto de métodos del validador, porque es un método personalizado.

Para ello usarás el método addMethod() del validador de JQuery.

En este caso, te interesa validar que el campo imei1 no contenga un valor repetido en la lista detallesImei.

El método some() del tipo Array devuelve un booleano, siendo true si una condición sobre algunos de los elementos del Array se cumple y false si ninguno de los elementos del Array cumple la condición.

Tu función de validación puede ser la siguiente:

const imeiNotInList = function(value) {
  return !detallesImei.some(element => element.imei1 === value);
}

Esta función devuelve true sólo si el valor que pasamos como argumento es distinto de todos los valores almacenados en la lista. El valor pasado a nuestra función será el valor del elemento al que le asignemos la regla de validación.

Una vez que tenemos la función de validación, debemos agregarla a los mñetodos de validación, para ello hacemos lo siguiente:

$.validator.addMethod(
  //nombre del método para identificar el validador
  'notInList',
  //nombre de la función a ejecutar
  imeiNotInList,
  // mensaje a mostrar si no pasa la validación
  'El imei ya existe en la lista'
);

Como puedes apreciar uso 3 argmuentos, el primero es el nombre con el que será conocido el método entre los métodos de mi validador, el segundo es la referencia a la función que se ejecutará al momento de validar y el tercer argumento es el mensaje que mostrará al usuario si la validación falla.

Ahora ya podemos agregar la regla personalizada a nuestro elemento para su validación, para ello establecemos las reglas de validación al elemento form adecuado:

$('#miFormulario').validate({
  rules: {
    'imei1': {
      notInList: true
    }
  });

Le estamos pasando las reglas, indicando para este caso que el elemento cuyo atributo name es igual a imei1 debe ser validado usando nuestra función personalizada de validación que hemos creado bajo la clave notInList. Cada vez que el valor del input sea cambiado, se ejecutará el validador. El valor del input es pasado a nuestra función de validación y así se obtiene el resultado esperado.

Una forma de ver este código funcionando sería la siguiente: (Uso Bootstrap para darle estilos, pero lo puedes omitir)

const detallesImei= [
  { imei1: 'aaaa', imeip: '1' },
  { imei1: 'aaaal', imeip: '1' }
];

// podemos escribir la función de validacion aquí
const imeiNotInList = function(value) {
  // devolverá true si el valor no existe en la lista
  return !detallesImei.some(element => element.imei1 === value);
}

// ahora podemos añadir el método de validación
$.validator.addMethod(
  'notInList', 
  imeiNotInList,
  'El imei introducido ya existe'
);

// ahora agregamos la regla

$('#miFormulario').validate({
  rules: {
    'imei1': {
      notInList: true,
      required: true
    }
  },
  submitHandler: function(form) {
    console.log('Formulario válido a sido enviado')
    // para enviar el formulario, descomentar la siguiente linea
    //form.submit();
  }
});
form .error {
  color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js" integrity="sha256-+BEKmIvQ6IsL8sHcvidtDrNOdZO3C9LtFPtF2H0dOHI=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid mt-3">
  <div class="row justify-content-center">
    <div class="col-12 col-sm-10 col-md-8 col-lg-6">
      <form action="#" id="miFormulario" class="form">
        <div class="form-group">
          <label for="imei1">Introduzca un valor:</label>
          <input id="imei1" name="imei1" class="form-control" type="text">
        </div>
        <button id="validar" type="submit" class="btn btn-primary my-2">Enviar</button>
      </form>
    </div>
  </div>
</div>

Espero que esto te ayude a resolver el problema.

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.