3

Estoy en un dilema como evaluar un campo que puede contener números enteros de diferentes logitudes:

1234567890
1234567890123456789012345678901234567
1234567890123456789012345678901234567890123456789

Es decir puede tener 10 , 37 o 49 dígitos enteros, actualmente lo realizo mediante un select donde selecciono el tipo de dígito a ingresar:

<select name="tipoFactura" id="tipoFactura" class="form-control input-sm">
  <option value="" selected="" disabled="">--------------</option>
  <option value="1">Preimpresa(10 digitos)</option>
  <option value="2">Electronica(37 digitos)</option>
  <option value="3">Electronica(49 digitos)</option>
</select>

con esto mediante jQuery agrego un maxlength al input:

$('#modalFactura #tipoFactura').on('change', function() {
  if(this.value == 1){
    $("#modalFactura #numero_autorizacion").attr({'minlength':'10','maxlength':'10'});
  }else if(this.value == 2){
    $("#modalFactura #numero_autorizacion").attr({'minlength':'37','maxlength':'37'});
  }else{
    $("#modalFactura #numero_autorizacion").attr({'minlength':'49','maxlength':'49'});
  }
});

Previamente para que solo admita números enteros uso expresiones regulares para que permita solo dígitos o números enteros.

setInputFilter(document.getElementById("numero_autorizacion"), function(value) {
  return /^\d*$/.test(value);
});
5
  • 1
    quieres validar que si elegiste primero 37 dígitos y los colocaste en el input y luego cambias de option a 10 dígitos, no te permita? Commented el 5 jul. 2019 a las 19:38
  • 1
    es decir deseo evaluar que el input puedar permitir ingresar sea 10, 37 ó 49 digitos no diferentes longitudes a estas.. Commented el 5 jul. 2019 a las 19:40
  • 1
    Y qué problema estás teniendo con el código actual? Publicá el HTML. Si tus inputs tienen IDs, no uses 2 selectores desde jQuery, usá directamente el ID del input.
    – azeós
    Commented el 5 jul. 2019 a las 19:41
  • 1
    el problema es que es engorroso/molestoso para el usuario tener que estar seleccionando primero la longitud lo que me gustaria hacer es evaluarlo automaticamente sin el select.. Commented el 5 jul. 2019 a las 19:43
  • 1
    Deberías agregar ese último comentario a la pregunta de otra forma no está claro que tipo de solución estás buscando y por ende o no está clara la pregunta o es principalmente basada en opiniones.
    – Rubén
    Commented el 5 jul. 2019 a las 21:32

2 respuestas 2

1

Realmente no necesitas JavaScript para resolver lo que quieres, puedes resolverlo usando el atributo pattern de la siguiente manera:

Simplemente estamos condicionando el valor aceptado del input:

Si los dígitos ingresados son números y su length es de 10 O Si los dígitos ingresados son números y su length es de 37 O Si los dígitos ingresados son números y su length es de 47 entonces el valor es aceptado.

Pero si los dígitos ingresados son diferentes a números y su length no está dentro de los ya estimados entonces la validación se ejecuta y arrojará el mensaje de error.

<form>
  <input pattern="[0-9]{10}|[0-9]{37}|[0-9]{49}" required title="Formato inválido">
  
  <input type="submit" value="Enviar">
</form>

3
  • Buena solución. El input podría ser de tipo "number".
    – azeós
    Commented el 5 jul. 2019 a las 20:36
  • 2
    @azeós de hecho no se podría, el atributo pattern solo funciona con campos de texto, fecha, búsqueda, url, teléfono, correo electrónico y contraseña.... el campo número no está permitido para dicho atributo. Commented el 5 jul. 2019 a las 20:38
  • 1
    Gracias, no lo sabía. Busqué documentación pero no encontré.
    – azeós
    Commented el 6 jul. 2019 a las 0:55
0

En este ejemplo:

Se está usando un eventListener llamado 'keyup' que detecta cada vez que presionas una tecla dentro del input asignado a la variable $numeroAutorizacion y se ejecuta el contenido de la función, así indicarías a tu cliente la cantidad de dígitos que debe ingresar:

const validLengths = [10, 37, 49]
const $numeroAutorizacion = $('#numero_autorizacion')
const $longitudIndicador = $('#longitud-indicador')

$numeroAutorizacion.on('keyup', function() {
  let inputLength = this.value.length
  if (validLengths.find(i => i === inputLength)) {
    $numeroAutorizacion.css('outline-color', '')
  } else {
    $numeroAutorizacion.css('outline-color', 'red')
  }

  $longitudIndicador.html(inputLength)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="numero_autorizacion">
<span id="longitud-indicador"></span>
<p>debe tener una longitud de: 10, 37, 49</p>

Y para validar que no se envíe una cantidad de dígitos diferente a la que esperas, validarías que el formulario no se puede enviar reutilizando este funcionalidad:

// este fragmento de código debería estar dentro de una función que capture
// el evento submit del formulario y haga un preventDefault() de dicho
// evento que de cumplirse la condición entonces ejecute el evento y en caso
// de que no, avises a tu cliente que el input no tiene la longitud que esperas
if (validLengths.find(i => i === inputLength)) {
  // lógica para enviar el formulario.
} else {
  // algún tipo de alerta que describa que el formulario es inválido.
} 

la variable validLengths contiene un array con las longitudes válidas para el formulario, entonces utilizando la función find() estás buscando para cada elemento de validLengths sea igual a tu inputLength(que es la longitud del value del input, ojo que deberás volver a pedir la actual longitud al intentar enviar el formulario y asignarla a una variable, digamos inputLength). Entonces de encontrar una coincidencia entre el elemento de validLengths que estás iterando con inputLength se ejecutará el if caso contrario el else.

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.