Form Validation

現代瀏覽器表都有哪些表單驗證技術？

Modern input types: date, email, required, pattern and so on... automaticallly validated, automaticallly get navite error messages

CSS :valid :invalid

Constraint Validation API

這些技術是否是就夠了，咱們表單驗證的問題就解決了？不是的...

 

理想的表單應該有哪些特徵？

• 當輸入域valid或invalid給出可視的提示
• 錯誤提示信息應該緊挨着輸入域
• 當輸入域blur時驗證輸入 

那麼問題來了：native CSS/API並無在blur時驗證，CSS是在onkeypress， 太早，並且過於頻繁；API是在onsubmit時驗證，這個時間又太晚了，畢竟表單都填好提交時，再報輸入的錯誤

 

從CSS開始尋找合理的驗證時機

:valid :invalid

這兩個css僞類觸發的時機爲onkeypress， 也就是說每一次鍵盤的輸入，都會從新評估該域的validity, 因此域是否合法並無一個明確的狀態

input:invalid:not(:focus)

這種寫法就把驗證時間延遲到了輸入完成，域blur狀態，但同時，這也使得用戶輸入時沒有狀態提示    

 

CSS error message

<input name="name" required>
<span>This field is required</span>

input:invalid + span {
   display: block;
}

 

Required

一個required域要求有輸入值，也就是說，當尚未輸入的時候，它就是invalid的，這樣，貌似有些不合理

提議的方案：

input:user-invalid (W3C)
input:user-error (WHATWG)

 

 

Constraint Validation API

The Idea API

• 找出域是valid或者invalid, 而且知道非法的緣由
• 顯示error message

經過validity properties找出域是valid或者invalid

field.validity

 

native error messages are useless

下面兩種方法能夠禁止native error messge

<form novalidate>
field.oninvalid = function () {return false}

 

HTML

<form novalidate>
  <label>
    Your name
    <input name=「name」 required>
    <span>This field is required</span>
  </label>
</form>

 

CSS

label.valid {}
label.valid input {}
label.valid span {}
label.invalid {}
label.invalid input {}
label.invalid span {}

 

 

Javascript

// Suppress native error messages
form.addEventListener(‘invalid',
  function (e) {
    e.preventDefault()
  },true);



// Trigger validation onblur
form.addEventListener(‘blur',
  function (e) {
    var tgt = e.target;
    if (tgt.nodeName === 'INPUT') {
      validateField(tgt);
    }
  },true);
form.onsubmit = validateAll;



// Actual validation
if (!field.validity.valid) {
  // set class to invalid
} else if (field.validity.valid
   && field.value) {
  // set class to valid
} else {
  // remove both classes
}

 

參考文章：https://quirksmode.org/forms/