Fix An invalid form control with name=’…’ is not focusable

今天在開發一個表單程式,表單一直無法發送,開始來找問題,開啟 Chrome 開發者工具,在 Console 面板中,每送出一次表單,就會出現一個這個訊息:

An invalid form control with name=’…’ is not focusable

原因是 Chrome 阻止設定為 required 的欄位隱藏

也對拉!! 必填欄位又隱藏起來,怎麼填? 表單送出前會做一個簡單的表單驗證

這樣也不行:

這樣當然也不行:

這樣可以:

大概是原本就是隱藏欄位了,所以沒有特別去驗證


解決方法:

開發者會去隱藏欄位當然是有原因的,有時候會因為條件判斷而顯示不同輸入欄位,例如:居住地下拉選單,但使用者可能住於國外,所以表單設計在下拉選單尾端加一個”海外”的選項,選擇了海外,就出現一個自行輸入的文字欄位,像這樣的需求其實蠻常見的,這些輸入欄位通常都只是隱藏起來,依照判斷來顯示,這種欄位當然有可能顯示出來就是必填,下方介紹幾個解決方法來解決這個問題。

novalidate

在 form 屬性加上 novalidate,關閉預設的表單驗證,表單內的所有欄位都不會進行驗證,除非有其他方式進行表單驗證,不然不建議這麼做。

jQuery prop(‘required’,true)

在顯示的時候,再加上 required,如此,不管隱藏的文字欄位顯示與否,表單都可以正確送出,文字欄位顯示時,就必須填寫。

這是一個簡單的提示,實務上的做法就看大家如何發揮創意了

 

相關文章:

READ  台灣 , 銀行代碼下拉選單

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料