標籤: UI

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

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

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

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

這樣也不行：

<input type="text" style="display:none" required>

這樣當然也不行：

<input type="text" id="example" required>
<script>
	$('#example').hide();
</script>

這樣可以：

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

<input type="hidden" required>

解決方法：

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

novalidate

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

<form novalidate>
    <input type="text" id="example" style="display:none" required>
    <input type="submit" value="submit">
</form>

jQuery prop(‘required’,true)

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

<form>
    <input type="text" id="example" style="display:none">
    <input type="submit" value="submit">
</form>
<hr>
<input type="button" id="show" value="show">
<script>
$('#show').click(function(e){
	$('#example').css('display','block').prop('required',true);;
});
</script>

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

 [……]

閱讀更多