HTML5表单必需属性。设置自定义验证消息？

46 浏览
0 Comments

HTML5表单必需属性。设置自定义验证消息？

\n\n我有以下的HTML表单：http://jsfiddle.net/nfgfP/\n\n




Remember me:

\n\n目前，当我在两个字段都为空的情况下按回车键时，会弹出一个提示框，提示\"请填写此字段\"。我该如何将默认消息更改为\"此字段不能为空\"？\n\n密码字段的错误消息仅为*****。要重新创建此字段，请给用户名赋值并提交。

0

2 答案

0 Comments

使用setCustomValidity：

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

如建议的@itpastorn，我已将其从Mootools更改为原生JavaScript，但是如果必要，您应该能够找到Mootools的等效项。

如果setCustomValidity不是空字符串，则会导致字段被视为无效；因此，在测试有效性之前必须清除它，不能只是设置并忘记它。

如下所述，则需要在invalid之外的某个事件中清除自定义有效性，否则可能需要额外通过oninvalid处理程序进行一次通过以清除它。

0
0 Comments

下面是用于显示自定义错误消息的代码：

这部分非常重要，因为它隐藏了用户输入新数据时的错误消息：

oninput="setCustomValidity('')"

注意：对于内联事件处理程序，不需要使用this关键字，但为了保持一致性，您可能还是想使用它。

0