2016年5月3日 星期二

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>

1 則留言 :