html5 自訂表單驗證的警示文字 - setCustomValidity(message)

html5 的表單驗證非常方便，能根據設置的type (例如：email, phone等)、requiered屬性的有無設置等在form中有input為invalid時，顯示提示文字，

不過我們通常會想要的不是預設的，而是自訂的提示文字，這時就可以用到setCustomValidity(message)這個javascript方法。

setCustomValidity(message)可以由 input type='xxx' 的元素呼叫，
它接受一個字串作為自訂的提示文字，要注意的是，當此方式呼叫該方法時，input元素的valid狀態會被invalid蓋住(不是蓋掉)。如果我們送入的字串為空字串，則此input元素的valid狀態會回復正常(沒被蓋往)。

所以我們可以在input驗證不通過時呼叫setCustomValidity('XXX')，並在它的內容值有改變或有被key in值時呼叫setCustomValidity('')來得到input的真正valid狀態(否則那個input就永遠是invalid)。

看一下下面的例子：

這裡有兩個 form，並且各自有一個設置required的input type='text'，兩個form都設置了

oninvalid="setCustomValidity('XXX')"

所以當沒有填值按下form的submit按鈕時，就會跳出自訂的提示文字並且阻止form的submit動作。

因為第一個form的input設置了onchange="setCustomValidity('');"，所以在input中的值改變時會對此input進行invalid error的清除，但此時我們會發現當在此input中打字時，提示文字不會消除且一直出現。

這是因為onchange在此input失去焦點(off focus)且值有改變(change)時才會觸發，當我們點擊Form1的第二個input再點回要reqired的input並打字時，提示文字就不會出現了。

當然，這通常不是我們想要的結果。

第二個Form的input設置了oninput="setCustomValidity('');"，使用了oninput而不是onchange來呼叫重設input的invalid狀態，oninput會在使用者對input打字時被觸發，於是當提示文字出現時，只要再input中打字(不用使其焦點)，就可以得到input的invalid狀態了，而這個結果也是我們所期望的。

參考資料：

1. JavaScript Validation API
2. oninput Event
3. onchange Event
4. HTML5應用：setCustomValidity(message)接口

源碼：

<form>
  Form 1
  <input type='text' oninvalid="setCustomValidity('Cusotm Alert 1');" onchange="setCustomValidity('');" placeholder='This input is required' required/>
  <input type='text' />
  <input type='submit' />
</form>
<form>
  Form 2
  <input type='text' oninvalid="setCustomValidity('Cusotm Alert 2');" oninput="setCustomValidity('');" placeholder='This input is required' required/>
  <input type='text' />
  <input type='submit' />
</form>