An invalid form control is not focusable

完整訊息是像這樣：

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

或是

An invalid form control with name='user-name' is not focusable

這是填完表單後，按下送出卻一直沒法送出，畫面也沒有跳出任何 invalid input 警示，打開瀏覽器的「開發人員工具」時，看到的錯誤訊息。

經過查詢，這個錯誤訊息是因為表單某些特殊的 input 被隱藏起來。

這些特殊 input 包含

1. 必填 input
2. 有 min / max 的 input

例如

<form>
	<input type="hidden" style="display:none" required/>
	<input type="submit"/>
</form>

以上的表單送出後，就會顯示以下錯誤訊息

An invalid form control with name='' is not focusable. 
  <input type=​"text" style=​"display:​none" required>​

依照上面列的結論，以下的表單，所有的 input 都會觸發此錯誤

<form>
	<input type="date" style="display:none" required/>
	<input type="date" style="display:none" min="2020-01-02" value="2020-01-01"/>
	<input type="date" style="display:none" max="2020-01-02" value="2020-01-03"/>
	<input type="submit"/>
</form>

解決方法

解決方法有以下幾種

1. 移除相關 attribute

只要把 required、min、max移除即可

2. 改成 readonly 或是 disabled

例如將上面的 form 改成如下

<form>
	<input type="date" style="display:none" required readonly/>  <!-- 這邊追加 readonly -->
	<input type="date" style="display:none" min="2020-01-02" value="2020-01-01"/>
	<input type="date" style="display:none" max="2020-01-02" value="2020-01-03"/>
	<input type="submit"/>
</form>

就會變成只有下面兩者會出現 An invalid form control is not focusable 錯誤

參考資料

An Invalid Form Control with Name='' Is Not Focusable. (2020, November 19). Stack Overflow. https://stackoverflow.com/questions/22148080