0

Tengo un formulario HTML5 que ingresa número enteros o con decimales usando un punto para la separación, son capturados por mi javascript que los parsea a float dependiendo y los guarda en localStorage y cada vez que se ingresa una nueva cantidad recupera el número guardado en localStorage y le suma el nuevo número ingresado por el formulario y lo vuelve a guardar, hasta hay todo bien pero...

PROBLEMA 1: Si se ingresa un . (punto) o varios ... (puntos) sin números me da NaN no logro definir en el formulario o en el Script una condición que no permita que se ingrese un punto o varios sin números

PROBLEMA 2: al ingresar un número y en vez de un . punto para separarlo de los decimales se ingresen varios puntos (ejemplo: 2....5 y se le da a guardar)

mi codigo:

function guardar(){

    var valor = document.getElementById("valor").value; 


   /*POR SI LA PERSONA OPRIME GUARDAR SIN INGRESAR UN NÚMERO*/

    if(valor!=""){

    var valorRecuperado = localStorage.getItem("producto"+parametro);

    if(valorRecuperado==null){
        valorRecuperado=0;
    } 

     valor = parseFloat(valor) + parseFloat(valorRecuperado);

     /*ESTO ES PARA SOLO DEJAR DOS NÚMEROS DECIMALES*/

     var valornuevo = valor.toFixed(2);

    localStorage.setItem("producto"+parametro, valornuevo);

    /*ESTO ES PARA QUE EL CAMPO DONDE ESTA EL IMPORTE INGRESADO VUELVA A ESTAR VACÍO*/

      document.getElementById("valor").value="" 
    }else{

      alert("error introduce un número");

    }

}

3 respuestas 3

1

EJEMPLO CORTO DEL PROBLEMA RESUELTO 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	

<script>



function guardar(){

          var valor = document.getElementById("valor").value; 
 alert(valor);

        if(isNaN(valor)) {
                            alert( "no es un numero");

        }else {
               alert("es un número");
}
}
</script>


<form name="calculator">
  
     <input type="num" step="0.01" name="ans" value="" id="valor">
    <br>
     <input type="button" onclick="guardar()" value="guardar">
    </form>

</body>
</html>

SOLUCIÓN COMPLETA:

SOLUCION COMPLETA:

<script>

function guardar(){
    /*RECUPERO EL VALOR DEL INPUNT CON LA ID="VALOR"*/
    var valor = document.getElementById("valor").value; 

    /*HAGO UN ALERT DEL VALOR PARA VER QUE LLEGO BIEN (ES SOLO PARA COMPROBAR LUEGO EN MI CODIGO DE VERDAD LO BORRO)*/
    alert(valor);

   /*POR SI LA PERSONA OPRIME GUARDAR SIN INGRESAR UN PRECIO NI NADA*/

    if(valor!=""){

    alert(valor);

        /*GRACIAS A LA RESPUESTA DE CARLOS PUEDE DEDUCIR QUE PODIA HACER OTRO IF PERO EN VEZ DE PREGUNTAR SI ES UN FLOAT
        PREGUNTA SI ES EL ERROR DIRECTAMENTE, EN ESE CASO NO PASARA MAS ALLA PARA ESTROPEAR MI SCRIPT */
        if(isNaN(valor)) {
                            alert("error introduce un precio VALIDO");
                            /*ESTO ES PARA LIMPIAR EL INPUT DEL VALOR QUE LE PUSO LA PERSONA DE PUNTOS... */
                             document.getElementById("valor").value="";  

               /*SI SE CUMPLE QUE NO ES UN ERROR NAN SEGUIRA Y ARA TODAS LAS OTRAS FUNCIONES QUE DESEO*/

                        }else{
                            
                            /*ESTO ES PARA RECUPERAR SI HAY UN VALOR DENTRO DEL LOCALSTORAGE*/
                          var precioRecuperado = localStorage.getItem("producto"+parametro);
                           /*ESTE IF SIMPLEMENTE PARA PREGUNTAR SI ES UN NULL NO HAY NADA, PUES DARLE VALOR 0, ASI NO ME DARA ERROR
                           AL PASEARLO A A FLOAT, SI NO ES NULL SEGUIRA Y PARSEARA EL NÚMERO ALMACENADO EN LOCALSTORAGE*/

                          if(precioRecuperado==null){
                           precioRecuperado=0;
                            } 
                          /*ESTO ES PARA PARECEAR LOS VALORES Y SUMARLOS*/
                          valor = parseFloat(valor) + parseFloat(precioRecuperado);
   
     /*ESTO ES PARA SOLO DEJAR DOS NÚMEROS DETRAS DE LA COMA, SINO LA APLICACION ME DARIA INFINITOS DECIMALES QUE NO ME INTERESA*/
                         var valornuevo = valor.toFixed(2);

    /*ESTO ES PARA VOLVER A ALMACENAR EL RESULTADO EN LOCAL STORAGE*/
                         localStorage.setItem("producto"+parametro, valornuevo);
  
    /*ESTO ES PARA QUE EL CAMPO DONDE SE INGRESE IMPORTE VUELVA A ESTAR VACIO, LE DIGO QUE EN EL DOCUMENTO HTML DONE EL ELEMENTO CUYO
    VALOR ID ES IGUAL A VALOR ESE VALOR PASE A SER COMILLAS ES DECIR UN ESPACIO VACIO SIN CONTENIDO ALGUNO*/
                          document.getElementById("valor").value="" }
    }else{
/*ESTO ES UN ALERT DE CUANDO LA PERSONA NO INGRESA NADA Y DA A GUARDAR */
      alert("error introduce un precio VALIDO");
    /* document.getElementById("valor").value=""; POR ESO COMENTO ESTA LÍNEA PORQUE REALMENTE NO ES NECESARIA YA QUE NO INGRESO NADA */ 
    }

}

</script>

0

puedes validar tambien dentro del input para decimales o sin decimales.

<input type="text" class="form-control" id="precio" name="precio" placeholder="Precio de venta del servicio" required pattern="^[0-9]{1,5}(\.[0-9]{0,2})?$" title="Ingresa sólo números con 0 ó 2 decimales" maxlength="8">

del lado de php tambien puede validar

if(is_float(27.25)) {
echo "es float\n";
}else {
    echo "no es float\n";
}

puto arriba si es la respuesta Bendiciones.

2
  • Gracias Carlos pero no es php es javascript igualmente tu respuesta me dio una pista que me llevo a dar con la respuesta que deseaba para solucionar los dos problemas, les dejo el código :) graciasss!!!
    – Leonardo
    Commented el 23 jun. 2018 a las 19:07
  • SOLUCION: if(valor!=""){ if(isNaN(valor){ alert("ERROR INTRODUCE UN NÚMERO");} else{ aquí ya iría todo mi código anterior }
    – Leonardo
    Commented el 23 jun. 2018 a las 19:23
0

Prueba validar la entrada del número y sus decimales con una Expresión regular. En este caso, la expresión adecuada es ^[+-]?([0-9]*[.])?[0-9]+$.

<script>
    function validarNumeroDecimal(numero){
        var patt = new RegExp("^[+-]?([0-9]*[.])?[0-9]+$");
        if (patt.test(numero) == false)
            alert("El valor " + numero + " no es un número");
    }
</script>

Este código te servirá para entradas del tipo:

  • 123

  • 123.456

  • .456

Puedes obtener más información sobre expresiones regulares aquí. En internet hay varios validadores de expresiones regulares, por ejemplo regex101.

Esta respuesta es un resumen tomado de StackOverflow en Inglés, el hilo principal con la respuesta completa y una explicación más exhaustiva sobre expresiones regulares lo puedes ver acá.

2
  • Gracias pero tú código me da el error : Uncaught SyntaxError: Unexpected token ]
    – Leonardo
    Commented el 23 jun. 2018 a las 18:20
  • Lamento el error de sintaxis, fue por no utilizar las variables adecuadas. Espero te sirva la respuesta y la marques para cerrar el hilo. Además ahora la expresión no solo busca el número sino que no vale ninguna otra entrada. Commented el 23 jun. 2018 a las 19:05

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.