html5 required属性使用中的注意事项

[[笔记]] [[html5]] [[required ]]

required 属性是 HTML5 中的新属性。
required 属性规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。
required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

重点：required 属性必须在form中，且由submit按钮触发。

<form >
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

[注意] input 输入框中回车时，会触发form提交表单

ajax方式提交数据，但希望使用required的提示方式。在原有基础上，增加form元素和submit按钮。
在onsubmit事件中通过return false取消submit的提交操作。

<form onsubmit="call_ajax(); return false;">
    <input type="hidden" name="id" id="id">    
    <input type="submit"  value="Save" >
</form>

动态创建form元素及submit按钮，并且使用required的提示方式。

var form =  new Element('form', {
    name: 'form',
});

var submit_button = new Element('input', {
    'type'      : 'submit',
    'value'     : 'save',
    'styles'    : {'display' : 'none'}
}).injectInside(form);

var edit_input = new Element('textarea', {
    name: 'text',
    required: ''
}).injectInside(form);

form.addEvent('submit', function (e) {
    //...
    return false;
}.bind(this));

form.inject(container);

[注意] 如果需要在输入框中对回车键进行处理，以提交表单操作。那么需要使用keyup事件。

[注意] 如果是keypress、keyup的情况，不能触发required的检查

[注意] keypress和keyup、keydown能响应的字符不一样

备用：使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成true，则 checkValidity() 总是会返回false，导致无论重新输入的格式正确与否，都会提示设置好的错误信息。

解决办法：用obj.validity.patternMismatch判断，如果输入的格式正确，就将setCustomValidity 清空，使JavaScript重新判断validity.customError的值

范畴：input 元素的 validity 属性包含一系列关于 validity 数据属性。
[[JavaScript 验证 API]]

html5 required属性使用中的注意事项

推荐阅读更多精彩内容