如何更改两个字段中的默认“请填写此字段”的提示信息。

Question

我希望在两个字段中有两条不同的消息，例如，用户名和密码字段包含消息，如“用户名不能为空”和“密码不能为空”。我只成功更改了消息，但这对于两个字段都是相同的。请看这里。

$(document).ready(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("Username cannot be blank");
        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
} })

- Godfather

---

可能是一个重复的问题：HTML5表单必填属性。设置自定义验证消息？ - Ciro Santilli OurBigBook.com

Answer 1

抱歉，我的代码中有一些错误。尝试使用以下代码，这对我有效：

$(document).ready(function() {
var msg="";
var elements = document.getElementsByTagName("INPUT");

for (var i = 0; i < elements.length; i++) {
   elements[i].oninvalid =function(e) {
        if (!e.target.validity.valid) {
        switch(e.target.id){
            case 'password' : 
            e.target.setCustomValidity("Bad password");break;
            case 'username' : 
            e.target.setCustomValidity("Username cannot be blank");break;
        default : e.target.setCustomValidity("");break;

        }
       }
    };
   elements[i].oninput = function(e) {
        e.target.setCustomValidity(msg);
    };
} 
})

- scraaappy

---

不使用Switch，直接尝试从标记中读取data-xyz属性如何？ - Anirudha Gupta

Answer 2

您可以使用以下代码。

   <input type="text"  required="" name="username" placeholder="用户名" oninvalid="this.setCustomValidity('用户名不能为空')">
   <input type="password"  required="" name="password" placeholder="密码" oninvalid="this.setCustomValidity('密码不能为空')">

- Obaidul Haque

---

这个是最简单和最有效的解决方案！为什么它没有被接受为最佳答案？ - Laynier Piedra

Answer 3

您可以为用户名和密码的输入框添加id属性：

<input placeholder="Username" required id="username" />
<input type="password" placeholder="Password" required id="password" />

然后，您可以使用switch语句根据事件的目标添加自定义验证消息：

$(document).ready(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) {
                switch (e.srcElement.id) {
                    case "username":
                        e.target.setCustomValidity("Username cannot be blank");
                        break;
                    case "password":
                        e.target.setCustomValidity("Password cannot be blank");
                        break;
                }
            }
        };
        elements[i].oninput = function (e) {
            e.target.setCustomValidity("");
        };
    }
})

这里有一个演示。

点击这里查看。

- Alex Filipovici

---

Alex，在你的演示中，两个字段都包含消息“请填写此字段”。 - Godfather

Answer 4

你需要在所有输入元素上进行循环，这就是为什么每个元素都会得到相同的结果。例如给你的输入框添加一个id，比如用户名和密码，然后尝试：

$(document).ready(function() {
var msg="";
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {
        e.target.setCustomValidity("");

        switch(e.target.id){
            case "password" :
            msg="Bad password";
            case "username" :
            msg="Username cannot be blank";
        }

        if (!e.target.validity.valid) {
            e.target.setCustomValidity(msg);
        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
} })

- scraaappy

---

Scraaappy，当我输入用户名并单击登录时，密码字段显示“用户名不能为空”。 - Godfather

你能发布你的完整代码吗？你在输入框中是否正确地写入了ID（就像Alex写的那样）？你可以在JavaScript代码中放置一个警报来查看出了什么问题。alert('target id:'+e.target.id); - scraaappy

我的完整代码在这里。当我输入用户名并点击登录时，在密码字段中会显示“用户名不能为空”。 - Godfather