Acerca de este problema HTML
El atributo min define el valor mínimo aceptable para tipos de entrada de formulario como number, range, date, time, datetime-local, week y month. Cuando el navegador o el validador de W3C encuentra min="", intenta analizar la cadena vacía como un número de coma flotante y falla porque la cadena vacía no es una representación válida de ningún número según las reglas de la especificación HTML para analizar números de coma flotante.
Este problema surge comúnmente cuando los motores de plantillas o el código del lado del servidor establecen dinámicamente el atributo min pero generan un valor vacío cuando no se configura ningún mínimo, o cuando los desarrolladores añaden el atributo como marcador de posición con la intención de completarlo más tarde.
Por qué esto es importante
-
Cumplimiento de estándares: La especificación HTML requiere explícitamente que el valor del atributo
minsea un número de coma flotante válido (para tipos numéricos) o una cadena de fecha/hora válida (para tipos de fecha/hora). Una cadena vacía no satisface ninguno de estos requisitos. -
Comportamiento impredecible del navegador: Cuando los navegadores encuentran un valor
mininválido, típicamente ignoran el atributo por completo. Esto significa que tu restricción prevista desaparece silenciosamente, permitiendo potencialmente que los usuarios envíen valores fuera del rango. -
Problemas de accesibilidad: Las tecnologías de asistencia pueden depender de
minymaxpara comunicar rangos de entrada válidos a los usuarios. Un valor inválido puede llevar a orientación confusa o ausente para usuarios de lectores de pantalla. -
Problemas de validación de formularios: La validación integrada del navegador que usa la API de Validación de Restricciones depende de valores
minválidos. Una cadena vacía puede causar que la validación nativa del navegador se comporte de manera inconsistente entre diferentes navegadores.
Cómo solucionarlo
Tienes dos opciones sencillas:
-
Proporciona un valor válido: Establece
mincon el número mínimo real o la cadena de fecha/hora que quieras hacer cumplir. -
Elimina el atributo: Si no se necesita ninguna restricción mínima, simplemente omite el atributo
min. La entrada entonces aceptará cualquier valor dentro del rango natural de su tipo.
Si tu valor min proviene de lógica dinámica del lado del servidor o JavaScript, asegúrate de que el atributo solo se renderice cuando esté disponible un valor válido, en lugar de generar una cadena vacía como respaldo.
Ejemplos
❌ Inválido: cadena vacía para min
<input type="number" min="" max="10">
La cadena vacía "" no es un número de coma flotante válido, así que esto desencadena el error de validación.
✅ Corregido: proporciona un número válido
<input type="number" min="0" max="10">
✅ Corregido: elimina min si no se necesita ningún mínimo
<input type="number" max="10">
❌ Inválido: min vacío en una entrada range
<input type="range" min="" max="100" step="5">
✅ Corregido: min válido en una entrada range
<input type="range" min="0" max="100" step="5">
❌ Inválido: min vacío en una entrada date
<input type="date" min="" max="2025-12-31">
Para entradas de fecha, min debe ser una cadena de fecha válida en formato YYYY-MM-DD — una cadena vacía es igualmente inválida aquí.
✅ Corregido: min válido en una entrada date
<input type="date" min="2025-01-01" max="2025-12-31">
Manejo de valores dinámicos en plantillas
Si estás usando un lenguaje de plantillas y el valor mínimo podría no existir siempre, renderiza condicionalmente el atributo en lugar de generar un valor vacío. Por ejemplo, en un pseudocódigo de plantilla genérica:
<!-- En lugar de siempre generar el atributo: -->
<input type="number" min="" max="10">
<!-- Solo inclúyelo cuando esté disponible un valor: -->
<input type="number" min="5" max="10">
En la práctica, usa la lógica condicional de tu motor de plantillas (por ejemplo, {% if min_value %}min="{{ min_value }}"{% endif %} en Jinja2, o construcciones similares) para asegurar que min solo esté presente cuando contenga un valor válido.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.