Html 如何更改两个字段中的默认“请填写此字段”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16886428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change default "please fill out this field" in two field
提问by Godfather
I would like two different messages in two field, for example, the username and password field that contain messages like "username cannot be blank" and "password cannot be blank". I only managed to change the message, but it is then the same for both fields. It's here
我想在两个字段中显示两条不同的消息，例如，包含“用户名不能为空”和“密码不能为空”等消息的用户名和密码字段。我只设法更改了消息，但是这两个字段都是相同的。它在这里
$(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("");
};
} })
回答by scraaappy
sorry, some mistakes in my code. Try that, that works for me :
抱歉，我的代码中有一些错误。试试看，这对我有用：
$(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);
};
}
})
回答by Obaidul Haque
You can use this code.
您可以使用此代码。
<input type="text" required="" name="username" placeholder="Username" oninvalid="this.setCustomValidity('Username cannot be blank')">
<input type="password" required="" name="password" placeholder="Password" oninvalid="this.setCustomValidity('Password cannot be blank')">
回答by Alex Filipovici
You may add an idattribute to both your username and password inputelements:
您可以id为用户名和密码input元素添加一个属性：
<input placeholder="Username" required id="username" />
<input type="password" placeholder="Password" required id="password" />
Then you may use a switchstatement to add the custom validation message according to the target of the event:
然后你可以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("");
};
}
})
Here's a demo.
这是一个演示。
回答by scraaappy
you make a loop on all your input elements that's why you obtain the same result in each element. Give an id to your input for example username and password, then try :
您对所有输入元素进行循环，这就是为什么在每个元素中获得相同结果的原因。为您的输入提供一个 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("");
};
} })
