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/