Introducción
Hoy estaba interactuando con un formulario, y noté que al poner un valor flotante o con punto decimal en un input de tipo number, salía una validación que decía que me pedía introducir sólo valores enteros.
Es decir, si introducía el 1.3 no era válido, pero si ponía 1 o 2 sí lo era.
Investigando me di cuenta de que esto tiene que ver con el atributo step del input.
Demostración del error
El mensaje de error es: “Introduce un valor válido. Los dos valores válidos más aproximados son X y X”
Para que el lector entienda, intentemos introducir un valor flotante en un input de tipo número en HTML.
Si utilizamos la validación que trae por defecto, saldrá un mensaje así:
Aquí un plunker:
Claro que esto no da problemas si sólo queremos valores enteros, pero ¿qué pasa si queremos permitir valores flotantes?
Solución
Todo esto se debe a un atributo llamado step. Step es como de cuánto en cuanto puede incrementar o reducirse el número del input.
Por defecto, step es 1; así que sólo permite saltar entre múltiplos de dicho valor.
Pero si ponemos step=”0.1″ podremos aumentar de 0.1 en 0.1, y así sucesivamente.
Para poder incrementar o reducir sin límites, podemos establecer step=”any” que se traduce como “cualquiera”.
<input step="any" type="number">
Aquí un plunker:
Con esto terminamos este post.
Gracias amigo por tu valioso aporte, tu solución me fue de gran ayuda.
Gracias por comentar. Le invito a suscribirse al blog y compartir
Saludos y éxito!
Gracias!! No podía encontrar la solución a este error. Te recomiendo que además de la imagen del error, copies este mensaje que dice “Introduce un valor válido….”.
Será mas fácil encontrar tu post al buscar el error escrito entre comillas en Google 😉
He agregado el mensaje de error al post. Gracias por tus comentarios 🙂
No olvides seguirme y compartir.
Hola parzibyte, muchísimas gracias por la solución …excelente explicación. Un saludo.
Gracias por esa explicación, estoy desarrollando una aplicación con Laravel y tengo varios inputs tipo numérico que traen valores tipo float de la base de datos y al intentar actualizarlos me lanzaba ese error.
Seguiré tu blog de ahora en adelante.
Me alegra que tu problema se haya resuelto 🙂
Te invito a seguirme en mis redes sociales, además de mi blog
Saludos