javascript 如果任何字段留空，如何在表单中生成错误消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18657857/
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 generate error message in form if any of the fields left blank
提问by user2750762
<form onsubmit="chkform()">
<table>
<tr><td>name</td><td><input type="text" id="uname"/></td></tr>
<tr><td></td><td><div id="er1"></div></td></tr>
<tr><td>address</td><td><input type="text" id="add"/></td></tr>
<tr><td></td><td><div id="er2"></div></td></tr>
</table>
</form>
<script>
function chkform()
{
if (document.getElementById("uname").value === "" )
{
document.getElementById("er1").innerHTML = "name cant be left blank";
document.getElementById("er1").style.color = "red";
document.getElementById("er1").style.display = "block";
}
}
</script>
i want to show error message in div, if any of the fields are left blank and this message should disappear when text box is clicked.
我想在 div 中显示错误消息，如果任何字段留空，并且单击文本框时此消息应该消失。
采纳答案by user2750762
<form onsubmit="return false">
<table>
<tr><td>name</td><td><input type="text" id="uname"/></td></tr>
<tr><td></td><td><div id="er1"></div></td></tr>
<tr><td>address</td><td><input type="text" id="add"/></td></tr>
<tr><td></td><td><div id="er2"></div></td></tr>
</table>
<input type="submit" onclick="chkform()"/>
</form>
<script>
function chkform()
{
if (document.getElementById("uname").value === "" )
{
document.getElementById("er1").innerHTML = "name cant be left blank";
document.getElementById("er1").style.color = "red";
document.getElementById("er1").style.display = "block";
}
}
</script>
回答by RienNeVaPlu?s
Using the following will always allow you to add inputs without re-writing your validation function:
使用以下内容将始终允许您在input不重新编写验证函数的情况下添加s：
function chkform()
{
var form = document.getElementsByTagName('form')[0];
var inputs = form.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
if(inputs[i].value === '')
// do your error
}
}
回答by rook
I guess you need returnto
我猜你需要return到
<form onsubmit="return chkform()">
and
和
return falsein your red alert message block
return false在您的红色警报消息块中
that works.
这样可行。
i.e.
IE
<form onsubmit="return chkform()">
function chkform() {
if (document.getElementById("uname").value === "") {
. . .
return false;
}
if (document.getElementById("car").value == "truck") {
. . .
return false;
}
. . .
}
回答by rook
Try adding both input boxes to an array, and looping through them to test whether they have values entered or not.
尝试将两个输入框添加到一个数组中，并循环遍历它们以测试它们是否输入了值。
I've edited your code.
我已经编辑了你的代码。
function chkform()
{
var inputs = [];
inputs[0] = document.getElementById("uname");
inputs[1] = document.getElementById("add");
for( i =0; i < inputs.length; i++) {
if (inputs[i].value === "" )
{
document.getElementById("er1").innerHTML = "Please fill out all form inputs!";
document.getElementById("er1").style.color = "red";
document.getElementById("er1").style.display = "block";
}
}
}
回答by defau1t
You should add else part to your if condition, that will take care of removing the error message when thge field has been filled.
您应该在 if 条件中添加 else 部分，这将在填充 thge 字段时删除错误消息。
else {
document.getElementById("er1").innerHTML = "";
document.getElementById("er1").style.display = "none";
}
