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