html5 的 setCustomValidity(message) 觀念釐清

在這篇文中主要是要釐清在使用setCustomValidity(message)的一些觀念，
setCustomValidity(message)可以跟據送入的message是否是空字串來蓋住input元素的validity狀態，但是要注意的是，並不會蓋掉input元素的validity狀態，input元素的真實validity狀態並不會因此而改變。

為了驗證這個現像，我們可以看一下下面這個例子：
當我們呼叫
setCustomValidity("自訂訊息");
時，input的真正valid訊息會被隱藏起來，而這時去看input的validity.valid的話就得到false的結果，就算我們在input中打字也是一樣，
但其實input在有打字內容時其直正的validity.valid應該是true。
我們可以呼叫setCustomValidity("")來讓input的真正validity.valid不要被蓋往，這時我們可以從isValid(after setCustomValidity("")):來得到之前被隱藏的正確結果。

========================================================================

這裡我再舉出一個比較常用的使用setCustomValidity("")的例子：

可以看到我們再input的oninvalid和oninput都呼叫check(this)，這是因為當在input中打字時，就算打的內容不符合設定的pattern，也不會觸發oninvalid，只會觸發oninput。

我們在check(target)中先呼叫setCustomValidity("")得到input的真正valid狀態，如果真正valid為false就呼叫setCustomValidity("自訂訊息")，而因為此呼叫會讓之後valid的真正狀態被隱藏，所以我們之後會再呼叫check時呼叫setCustomValidity("")來讓input的真正valid狀態不要被隱藏起來。

這樣之後再用if()詢問input的狀態時，就不會得到錯的、與實際不符的valid狀態了。
重點就是，在檢查valid的狀態時必須要真正的(沒被隱藏的)，再判斷要不要設定自訂訊息後。

========================================================================

接下來我再舉出一個例子，有時候我們會想要對一個Group，即一群name一樣的input元素去做判斷，例如對於input="radio"只會想要同一個Group裡的radio被選取，像下面這樣：


如果想在radio的oninvalid和onclick使用上述的check(target)方法的話，會造成錯誤。
如果有兩個設置rquired的同name的radio且都沒有被點擊時，按下submit後會對每一個radio呼叫check(target)並都被隱藏真正valid狀態。
當點擊第二個radio時，會只對第二個radio呼叫check(target)，此時第二個radio的valid會是true，但對一個radio的valid還是false，所以此時按下submit會無法submit，接著又因為submit會讓每一個check(target)都被呼叫，所以此時每一個radio的valid狀態都才會正常，再按一次submit就可以成功submit了。

結果是submit要按兩下才會成功，這很顯然不是我們想要的，所以我們要做一點改良。

以下就是改良的方法，checkValid(target)，在其中也對一個input用radio來設置不同的pattern check：

重點就是在checkValid(target)裡面必須對所有group裡面的input都去做檢查並設置正確的valid狀態，如此一來，不管是submit還是onclick就都能對所有的input設置正確的valid狀態了
(當然submit會輪詢一次所有input，而checkValid(target)又會輪詢一次，所以會輪詢兩次造成效能上的浪費，不過這裡就忽略此issue了)。