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.