An invalid form control with name='xxx' is not focusable

Si desarrollas con HTML5 y utilizas el atributo required en formularios, quizás te hayas encontrado con este error: An invalid form control with name=’{{nombre del campo}}‘ is not focusable.

Causa

Cuando un campo vacío tiene el atributo required y se intenta enviar el formulario, algunos navegadores como Chrome o Firefox pone el foco en ese campo y saca un mensaje en un tooltip especial.

Este error se produce cuando el campo obligatorio está escondido o no es visible y por tanto no se puede señalizar e informar de que es obligatorio.

Solución

Realmente es algo a mejorar en los navegadores que dan problema. Mientras tanto, podemos optar por seguir utilizando la validación HTML5 y cuando se oculten campos via Javascript, eliminar el atributo required y realizar la validación en este mismo lenguaje.