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.