Parece que cuando un elemento de input se carga inicialmente, su validez no se evalúa de inmediato. Por ejemplo, si mi HTML se ve así...
<input type="text" value="ABC" minlength="5"> En JavaScript, parece que la entrada es válida y no demasiado corta, a pesar de que el atributo de value se establece en una longitud inferior a 5. Por ejemplo:
const input = document.querySelector("input"); console.log(input.validity.valid); // true console.log(input.validity.tooShort); // falseSolo cuando el usuario realiza un cambio en la entrada podemos obtener un cálculo real de la validez de la entrada.
¿Hay alguna forma de forzar la entrada para evaluar su validez real en la carga, incluso si el usuario aún no ha tocado la entrada?
Ver ejemplo: https://jsfiddle.net/t5afujkn/3/
Supongo que la razón es que su valor predeterminado no se verifica desde <input> directamente en la carga, ya que probablemente no active una verificación de los valores predeterminados.
Puede agregar otra condición de verificación en su js como se muestra a continuación:
{ const displayObj = { valid: input.validity.valid, tooShort: input.validity.tooShort }; if (input.value.length < 5) { displayObj.valid = false; displayObj.tooShort = true; document.querySelector("p").textContent = JSON.stringify(displayObj); } } o tal vez también puede intentar poner la condición if en algún lugar fuera de la llamada del botón.
También hice una actualización en jsfiddle , no estoy seguro si puedes verlo: https://jsfiddle.net/2Lhp96ct/6/