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

但當時還是搞很久,因為 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 


創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

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