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

javascript html validation forms

2022-08-29 23:25:14

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

目前，当我点击Enter键时，当它们都是空白时，会出现一个弹出框，上面写着“请填写此字段”。如何将默认消息更改为“此字段不能留空”？

编辑：另请注意，类型密码字段的错误消息只是。要重新创建此内容，请为用户名提供一个值并点击提交。*****

编辑：我正在使用Chrome 10进行测试。请做同样的事情

答案 1

下面是处理 HTML5 中的自定义错误消息的代码：

<input type="text" id="username" required placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"/>

这部分很重要，因为它会在用户输入新数据时隐藏错误消息：

oninput="this.setCustomValidity('')"

答案 2

使用 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更改为vanilla JavaScript，但是如果有必要，您应该能够计算出Mootools等效项。

编辑

我在这里更新了代码，因为其工作原理与我最初回答时的理解略有不同。如果设置为空字符串以外的任何内容，则将导致该字段被视为无效;因此，您必须在测试有效性之前清除它，您不能只是设置它而忘记它。setCustomValiditysetCustomValidity

进一步编辑

正如下面@thomasvdb的评论中指出的那样，您需要在超出某些事件的情况下清除自定义有效性，否则可能会有额外的通过处理程序来清除它。invalidoninvalid