Skip to main content
1 de 2

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

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
    }
  },
  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.