0

Saludos deseo validar un input que reciba solo valores decimales con punto algo asi:

1350.85
10328.84
1.25
225.75

para lo cual tengo el siguiente codigo que he intentado:

$('.decimales').on('input', function () {
  this.value = this.value.replace(/[^0-9,]/g, '').replace(/,/g, '.');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="decimales">

Como verán acepta solo valores numéricos lo cual esta bien pero al momento de poner una coma reemplaza por el punto y si coloco un numero se borra el punto, agradezco cualquier sugerencia..!!

5
  • 1
    this.value.replace(/[^0-9,]/g, '') esto reemplaza cualquier valor que no sea un dígito o coma (incluyendo el punto) Commented el 8 mar. 2019 a las 17:49
  • ¿El input que representa, un número formateado, una ip?
    – farsSharp
    Commented el 8 mar. 2019 a las 18:09
  • es para valores monetarios. Commented el 8 mar. 2019 a las 18:10
  • Esto es información importante para la solución, te recomiendo agregarlo en la pregunta.
    – farsSharp
    Commented el 8 mar. 2019 a las 18:36
  • No creo que ese detalle sea importante. OP está preguntando sobre el problema que tiene de que no se le mantiene el punto.
    – Julio
    Commented el 13 mar. 2019 a las 0:05

3 respuestas 3

2

Ibas bien encaminado, pero te faltó un pequeño detalle:

Cuando la entrada contiene un punto (bien porque el usuario ya lo introdujo correctamente desde el principio, o bien porque fue remplazado una vez el usuario lo introdujo), tienes que ser capaz de mantener ese punto. Y con el primer replace lo estás eliminando.

Ten en cuenta que ejecutas ambos replaces cada vez que el usuario pulsa una tecla.

Esta expresión regular replace(/[^0-9,]/g, '') Significa borrar cualquier cosa que no sea números o una coma. Así que es normal que te borre el punto. Simplemente añade el punto a esa lista de caracteres.

Así pues, esto debería funcionar:

$('.decimales').on('input', function () {
  this.value = this.value.replace(/[^0-9,.]/g, '').replace(/,/g, '.');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="decimales">

1
  • muchas gracias funciono perfecto..!! Commented el 13 mar. 2019 a las 14:45
1

solo agrega la propiedad pattern en HTML5

<input  type="text" pattern="^[0-9]+(.[0-9]+)?$"  name="dCantidad" required>
2
  • Tu respuesta es buena, pero trata de explicar el regexp ya que no todos saben usar expresiones regulares. Así tu respuesta sería mejor recibida. Además, puedes agregar una comprobación usando sólo Javascript, eso complementaría tu respuesta. Recuerda que hay situaciones en las que tal vez exista incompatibilidad del navegador con el atributo pattern. Commented el 8 mar. 2019 a las 20:14
  • OP comentaba sobre los problemas que tenía al intentar cambiar el formato del número (cambiando de comas a punto), de manera dinámica. La respuesta no acaba de ajustarse a lo que pide OP
    – Julio
    Commented el 13 mar. 2019 a las 0:01
0

Hay que hacerlo en dos partes. Primero limpiar el número y después darle el formato Monetario.

EL segundo repleace que aplicas al punto(.) no tiene razón de ser cuando puedes agregar la regla desde el principio. Añadí un menos(-) en las reglas RegExp para que valide valores negativos.

Para este caso es más eficiente el evento change del input.

$('.decimales').on('change', function () {
  this.value = maskDinero(unmaskDinero(this.value));
});

function unmaskDinero(numeroString) {
    return +(numeroString.replace(/[^0-9.-]+/g,""));
}
function maskDinero(numeroInt) {
    return "$" + parseFloat(numeroInt).toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="decimales">

3
  • en si solo acepta números y punto lo cual esta bien pero busco que si encuentra una coma la reemplaze por punto es decir por comodidad del usuario, voy a revisar las reglas muchas gracias..!! Commented el 8 mar. 2019 a las 17:59
  • entonces hay que reacomodar tus reglas
    – farsSharp
    Commented el 8 mar. 2019 a las 18:00
  • ¿Qué pasa si escribo 123.456.789 en el input? Creo que debes mejorar el regexp. Saludos Commented el 8 mar. 2019 a las 18:08

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.