0

Buenas tardes tengo el siguiente código, pero no logró hacer la siguiente válidación, necesito que en una etiqueta <div> muestre el mensaje "bien" o "mal".

$(document).on("keyup", "input#txt-codigo-doc",function () {
    var soloNumero =/[^0-9]+$/g;
    $(this).val($(this).val().replace(soloNumero,''));
    if(soloNumero.test($(this).val())){
        $("div#mensaje-codigo-doc").html("bien");
    }else{
        $("div#mensaje-codigo-doc").html("mal");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-codigo-doc">
<div id="mensaje-codigo-doc"></div>

Al ejecutar el código siempre me retorna el mensaje "mal", nose porque sale siempre el mismo mensaje si la condición debe cumplirse.
Necesito ayuda para solucionar este problema, como siempre cualquier ayuda es bienvenida.

4
  • ¿Y, qué es lo que tiene que ocurrir para que salga bien?
    – A. Cedano
    el 28 sep. 2019 a las 18:21
  • En esta línea $(this).val($(this).val().replace(soloNumero,'')); tú evitas que el input reciba otra cosa diferente de números (prueba a escribir una letra por ejemplo), por tanto nunca se podrá escribir algo para que se imprima la palabra bien. Por favor, explica con claridad qué es lo que quieres hacer realmente.
    – A. Cedano
    el 28 sep. 2019 a las 18:28
  • Hola @A.Cedano primero gracias por responder a esta pregunta, lo que se quiere como resultado es que al ingresar números en la etiqueta <div> debe mostrar "bien" y si se ingresa letras debe mostrar "mal", pero la condición no se cumple.
    – Daniel
    el 28 sep. 2019 a las 18:30
  • No se cumple por esto: $(this).val($(this).val().replace(soloNumero,'')); si quieres comenta esa línea y verás que funciona como esperas.
    – A. Cedano
    el 28 sep. 2019 a las 18:32

2 respuestas 2

1

Lo que intentabas hacer entiendo que es un .replace para que ni siquiera se muestre todo lo que no es número, uno de los problemas es la expresión, que debería ser /([^0-9])/g (todo lo que no es número se reemplaza por nada) En lugar de [^0-9]+$ que evalua si hay un no numero al final.

Otro tema es que hecho así, al hacer el .test despues de un .replace debería validar siempre, porque estamos transformando el string, por ello podemos guardarlo en una variable para evaluar el string antes del .replace, pero así tampoco tiene mucho sentido, porque lo que evaluamos en realidad es si presiona una tecla incorrecta, lo que no tiene mucho sentido, Ejemplo:

$(document).on("keyup", "input#txt-codigo-doc",function () {
    var soloNumero =/([^0-9])/g;
    var value = $(this).val();
    $(this).val(value.replace(soloNumero,''));
    
    //Al hacer replace no tiene mucho sentido hacer esto
    
    if(!soloNumero.test(value)){
        $("div#mensaje-codigo-doc").html("la última tecla presionada ES un número");
    }else{
        $("div#mensaje-codigo-doc").html("la última tecla presionada NO ES un número");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-codigo-doc">
<div id="mensaje-codigo-doc"></div>

En cada evento keyup el value del input es remplazado, es por eso que en relidad evaluamos la última tecla, el último keyup.

0

No se cumple porque en esta línea:

$(this).val($(this).val().replace(soloNumero,''));

estás evitando que el input reciba letras u otros caracteres que no sean numéricos.

Si la quitas, funcionará como esperas.

Por otra parte, la condición estaba al revés, según lo afirmado en tu comentario:

lo que se quiere como resultado es que al ingresar números en la etiqueta <div> debe mostrar "bien" y si se ingresa letras debe mostrar "mal"

$(document).on("keyup", "input#txt-codigo-doc",function () {
    var soloNumero = /[^0-9]+$/g;
    if(soloNumero.test($(this).val())){
        $("div#mensaje-codigo-doc").html("mal");
    }else{
        $("div#mensaje-codigo-doc").html("bien");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-codigo-doc">
<div id="mensaje-codigo-doc"></div>


Evitando un código demasiado verboso

Cabe decir que puedes hacer uso de un operador ternario para asignar el valor bieno mal a una variable y luego cambiar el div con ese valor. Algo así:

$(document).on("keyup", "input#txt-codigo-doc",function () {
    var soloNumero =/[^0-9]+$/g;
    var mText=(soloNumero.test($(this).val())) ? "mal" : "bien";
    $("div#mensaje-codigo-doc").html(mText);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txt-codigo-doc">
<div id="mensaje-codigo-doc"></div>

3
  • 1
    Es correcto, pero modifica /[^0-9]+$/g a /^[0-9]+$/g tal como lo defines en el comentario de arriba para que corra correctamente.
    – Daniel
    el 28 sep. 2019 a las 18:38
  • @DanielR.Anccasi el comentario al respecto no es mío. Y si lo que quieres es lo que comentaste antes: que cada vez que se escriba un número imprima bien y si no es un número que se imprima mal, la expresión está bien así, puesta del otro modo sugerido, si pruebas una secuencia como esta: 1a5 al escribir el cinco se quedará imprimendo mal. Haz la prueba. Sin embargo, así como está funciona del modo que esperas, si he entendido bien. Revisa la respuesta editada y mi sugerencia sobre la verbosidad del código. Saludos.
    – A. Cedano
    el 28 sep. 2019 a las 18:52
  • 1
    @A.Cedano La expresión /[^0-9]+$/g valida que no haya numeros al final, por lo que una cadena como "hola4" valida, y no debería, para solucionar eso la expresión debería ser algo como ^/[^0-9]+/g, la expresión que había pasado yo en los comentarios era para utilizar el .replace.
    – Emeeus
    el 28 sep. 2019 a las 20:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.