HTML5: ¿Por qué mi atributo “oninvalid” permite que el patrón falle?

Este pequeño campo de contraseña HTML5 funciona perfectamente SIN el atributo oninvalid (el patrón dice: mínimo 6 caracteres):

Vea el jsFiddle aquí .

Pero cuando agrego un atributo oninvalid que da un mensaje de error personalizado cuando la entrada del usuario no se ajusta al patrón, el campo NUNCA se vuelve válido, vea el código aquí:

 

Vea el jsFiddle aquí .

¿Puedes detectar el error?

Si establece un valor con setCustomValidity() , el campo no es válido. Eso es establecer una cadena de longitud distinta de cero hace que el navegador considere que el campo no es válido. Para permitir los efectos de cualquier otra validación, debe borrar la validez personalizada:

  

Como me encontré con el mismo problema, aquí está mi solución: probada y trabajando con FF, Chrome, IE 10, Edge (febrero de 2017).

 

Me gusta usar de esta manera:

  

Y desenchufado para todos los datos de entrada válidos

UPD , una cosa más para un mejor trabajo:

  $("input").attr("onblur", "setCustomValidity('')"); $("input").attr("oninput", "setCustomValidity(' ')"); 

Puede usar el title siempre que no le importe tener 'You must use this format:' antes de su mensaje. Si desea un mensaje personalizado completo, el setCustomValidity() funcionó para mí.