1

tengo el siguiente problema, en un campo input solo se pueden entrar numeros decimales con dos numeros despues del punto.

ejemplo 5.25 o 132.50

he intentado con lo siguiente por no he resuelto:

    function ValidateMoney(_id) {
    var amount = document.getElementById(_id).value;
    var patron = /^(\d+|\d+.\d{2})$/;
    if (!patron.test(amount)) {
        window.alert('cantidad ingresada incorrectamente');
        document.getElementById('amount').focus();
        return false;
    } else {
        return true;
    }
}

Este es mi html

  <div class="col-md-2">
            <div class="form-group">
                <label class="requiredcomponent">Amount</label>
                <input type="number" placeholder="0.00" class="form-control" name="price" data-field="Amount" min="0" step="0.05" title="Amount" id="amount">
            </div>
        </div>
4
  • 1
    ¿Cual debería ser el separado decimal, el punto (.) o la coma (,)? Pregunto porque en la RegExp usas coma, pero en los números de ejemplo usas punto.
    – Marcos
    el 24 abr. 2019 a las 12:15
  • ¿Que elemento es el que tiene id 'amount' y al que intentas hacer focus? el 24 abr. 2019 a las 12:19
  • Tienes mal el regexp en todo caso, debes separar en dos grupos para usar el |. Aclara el tema de los decimales también, ¿es punto o es coma? el 24 abr. 2019 a las 12:35
  • disculpen el error, es con punto el separador, pero no me funciona para dos decimales despues del punto el 24 abr. 2019 a las 12:47

2 respuestas 2

3

Como te dije en mi comentario, el problema es la forma en la que usas el operador lógico |, ya que el mismo (como lo tienes) actúa sólo sobre un grupo de búsqueda, y a ti te interesa tener 2 grupos diferenciados.

PROBLEMA

Se desea validar un campo input de HTML, usando Javascript, de tal manera que solo permita hasta 2 decimales en cantidades numéricas. El separador para decimales es .

SOLUCIÓN

Para realizar dicha validación usaremos una expresión regular y compararemos el valor del elemento input contra dicha expresión regular.

La dificultad solo radica en que debemos detectar cuando la cantidad lleva decimales y cuando no los lleva.

Una expresión regular puede componerse de grupos de búsqueda que se encierran entre paréntesis. Podemos establecer un grupo de búsqueda para hacer match con números que no llevan cantidad decimal y otro grupo de búsqueda para números que si llevan valore decimal.

Una forma de realizar la validación sería la siguiente:

const btn = document.getElementById('button');
const isValid = /^(\d+)$|^(\d+\.{1}\d{2})$/;
btn.addEventListener('click', (event) => {
  event.preventDefault();
  let cantidad = document.getElementById('cantidad').value;
  if (!isValid.test(cantidad)) {
    alert('Formato no válido')
  } else {
    console.log('Validación superada: ', cantidad);
  }
});
<div>
  <label for="cantidad">Cantidad:</label><br>
  <input type="text" id="cantidad" name="cantidad" placeholder="00.00"><br>
  <button type="button" id="button">Validar</button>
 </div>

En nuestra RegExp, tenemos los siguientes grupos:

  1. ^(\d+)$: Indica dígitos que pueden repetirse. Se debe iniciar con dígitos (^) y se debe finalizar con dígitos ($).
  2. |: Operador lógico tipo OR.
  3. ^(\d+\.{1}\d{2})$: El segundo grupo de búsqueda que actúa sobre números con decimales. Indica que el patrón ha de empezar con dígitos, debe contener exactamente 1 punto y ha de terminar con exactamente 2 dígitos.

Espero que sea la validación que estabas buscando.

1
  • En efecto era eso mismo Mauricio, Gracias por la ayuda el 24 abr. 2019 a las 13:58
-1

solo debes hacer una pequeña modificación en tu expresión. Agrega paréntesis a la evaluación de decimales y ponlo como opcional (?), ya que puede ser valido un numero entero también. Por ejemplo: 5 es válido, 5.00 también es válido.

    <label class="requiredcomponent">Amount</label>
    <input type="number" placeholder="0.00" min="0" step="0.05" id="amount" onchange="ValidateMoney('amount')">

	<script type="text/javascript">
	    function ValidateMoney(_id)
	    {
		    var amount = document.getElementById(_id).value;
		    console.log(amount);
                   //d+ permite caracteres enteros
                   //si hay un caracter que no es dígito entonces evalua lo que está en paréntesis (?) significa opcional
		    var patron = /^(\d+(.{1}\d{2})?)$/;     		    
                    if (!patron.test(amount))
		    {
		        window.alert('cantidad ingresada incorrectamente');
		        document.getElementById('amount').focus();
		        return false;
        }
		    else
		        return true;
		  }
	</script>

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.