這個問題其實是前幾個禮拜開發專案時遇到的，其實最後總結來講算是常識

但當時還是搞很久，因為 js 寫太長......debugger 也看不出問題 (因為是瀏覽器行為造成的)

不過還是寫出來混一下篇數，因為最近在衝百萬累積人氣如下圖 ㄎㄎ

廢文開始

大家都知道 HTML5 的標籤很多本身就具有驗證的能力

ex： <input type="......." />

舉凡...color、date、datetime、email、month、number、range、tel、time、url......

在進行表單送出動作的時候就會自己進行檢查，或是根本在輸入的時候就規範你如何輸入

ex : 

輸入方式都幫你喬好了

但一般表單可能會含有一些邏輯在，例如在某種狀態要讓某個欄位隱藏或 disabled

此時如果隱藏的區塊中含有一些需要驗證的 html5 tag，在Chrome 上就會有一些問題

如果你動態隱藏了html5 需要驗證的 tag 再按送出，就會發生類似如下的錯誤訊息

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

下面的例子來模擬一下發生的問題，再按 ok submit之前，先按 hide 把number 藏起來

<form>
<input type="text" txt="姓名" /><br />
<input type="number" value="" required /><br />
<input type="button" id="hidBtn" value="hide" />
<input type="submit" id="btn" value="ok" />
</form>
<script>
$("#hidBtn").click(function(){
$("input[type=number]").hide();
});
</script>


按下送出後在 console 就會看到 "An invalid form control with name='' is not focusable." 的錯誤訊息

這是因為在按 submit 送出表單時會做 html5 本身的驗證，驗證失敗會 focus 到該欄位 (瀏覽器行為)

但是該欄位又被 js 隱藏了 focus 不到，所以才會出現不可 focus 的錯誤訊息

因為 html5 tag 在各家瀏覽器中表現的樣式與模式都有些不同，目前在 chrome 上會有這個問題

解決方式有幾種 :

1. 在使用 js 進行隱藏的時候，移除 required 屬性就不會觸發驗證

ex：document.getElementById('field').removeAttribute("required");

2. 在 form 標籤上加上 novalidate 屬性，html5 就不會驗證欄位，但全部的 html5 tag 都不再驗證 (好像不太好)

ex：<form novalidate >  </form>


總結：建議使用第一種


end 


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 小雕 的頭像
    小雕

    小雕雕的家

    小雕 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄