Acerca de este problema HTML
El atributo step especifica la granularidad a la que debe adherirse el valor de una entrada. Controla el incremento cuando un usuario hace clic en los botones spinner de arriba/abajo en una entrada de número, mueve un control deslizante en una entrada de rango, o ajusta entradas de fecha y hora. El navegador también usa este valor durante la validación de restricciones para determinar qué valores se consideran válidos basándose en la base de incremento (típicamente el valor min o el valor por defecto de la entrada).
Cuando la especificación HTML define el atributo step, requiere que el valor sea un número de punto flotante válido mayor que cero. Un valor de "0" es explícitamente inválido porque un incremento de cero significa ningún incremento en absoluto — es lógicamente sin sentido. No puedes avanzar a través de valores en incrementos de nada. El validador W3C marca esto como un error porque "0" falla el requisito de ser un número positivo.
Por qué esto importa
-
Cumplimiento de estándares: El estándar living HTML de WHATWG requiere explícitamente que
stepse analice como un número mayor que cero. Un valor de"0"viola esta regla. -
Comportamiento del navegador: Aunque los navegadores pueden no fallar con
step="0", el comportamiento se vuelve impredecible. Los botones spinner pueden dejar de funcionar, y la validación de formularios puede no funcionar como se esperaba. -
Accesibilidad: Las tecnologías asistivas dependen de valores
stepcorrectos para comunicar rangos de entrada válidos a los usuarios. Un step inválido puede llevar a una experiencia confusa.
Cómo solucionarlo
Elige la solución apropiada dependiendo de tu intención:
-
Si quieres incrementos específicos (ej., números enteros, centavos, décimos), establece
stepal intervalo deseado como"1","0.01", o"0.1". -
Si quieres permitir cualquier valor sin restricción de incremento, usa la palabra clave especial
step="any". Esto le dice al navegador que no se implica ningún incremento y cualquier valor de punto flotante es aceptable. -
Si no necesitas el atributo en absoluto, simplemente elimínalo. Cada tipo de entrada tiene un valor step por defecto (ej.,
1paratype="number").
Ejemplos
❌ Inválido: step establecido en cero
<label for="price">Precio:</label>
<input id="price" name="price" type="number" step="0" min="0">
Esto desencadena el error de validación porque "0" no es un número de punto flotante positivo válido.
✅ Solucionado: usando un valor step específico
Si quieres que la entrada acepte valores en incrementos de un centavo:
<label for="price">Precio:</label>
<input id="price" name="price" type="number" step="0.01" min="0">
Los valores válidos incluirían 0, 0.01, 0.02, 1.50, 99.99, y así sucesivamente.
✅ Solucionado: usando step="any" para precisión sin restricciones
Si quieres permitir cualquier valor numérico sin restricciones de incremento:
<label for="price">Precio:</label>
<input id="price" name="price" type="number" step="any" min="0">
Esto permite cualquier valor de punto flotante, como 3.14159 o 0.007.
✅ Solucionado: usando un step de número entero con un mínimo diferente de cero
<label for="quantity">Cantidad:</label>
<input id="quantity" name="quantity" type="number" step="2" min="1.3">
Con step="2" y min="1.3", los valores válidos incluyen 1.3, 3.3, 5.3, 7.3, y así sucesivamente. La base de incremento es 1.3, y cada valor válido es un múltiplo par de 2 alejado de ella.
✅ Solucionado: eliminando el atributo completamente
Si el comportamiento step por defecto es suficiente, simplemente omite el atributo:
<label for="amount">Cantidad:</label>
<input id="amount" name="amount" type="number" min="0">
El step por defecto para type="number" es 1, por lo que los valores válidos son números enteros (0, 1, 2, etc.).
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: