Déjame mostrarte algunos ejemplos para que entiendas el problema claramente.

✔️ Ejemplo 1: trabajando como se esperaba

Considere una entrada <input required /> y algo de css para visualizar su validez.

 console.log( document.querySelector('input').checkValidity() )

 input:invalid { background: pink; }

 <input required />

Si verificamos su estado de validez a través de Javascript inputEl.checkValidity() obtenemos un false , buscando más en inputEl.validity muestra { valueMissing: true, typeMismatch: false, …}

Ok, todo es lógica por ahora.

✔️ Ejemplo 2: funciona como se esperaba

Ahora, si agregamos un valor a la entrada, la validación debería estar bien:

 console.log( document.querySelector('input').checkValidity() )

 input:invalid { background: pink; }

 <input required value="John Cena" />

Si verificamos su estado de validez a través de Javascript inputEl.checkValidity() obtenemos un true .

Tener sentido.

❌ Ejemplo 3: no funciona como se esperaba

maxlength="5" :

 console.log( document.querySelector('input').checkValidity() )

 input:invalid { background: pink; }

 <input required value="John Cena" maxlength="5" />

¿Por qué el campo no es válido inicialmente?

Si verificamos su estado de validez a través de Javascript inputEl.checkValidity() , obtenemos un true ...?

Además, si editamos esta entrada, la validación se actualizará y el campo se marcará como no válido.

Aquí está el ejemplo completo: https://codepen.io/Shuunen/pen/XWaqpVo