提交按钮的 onclick 事件上的 JavaScript 函数未验证文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8705845/
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
JavaScript function on onclick event of submit button not validating textbox
提问by Rfqkml
I wrote this code (which posts to a PHP page) so that if guests do not input their name, it would pop out an alert box. However, Even when I put something in the name textbox and submit it, the alert box still pop out and it would submit the $_POST['gname'] to the server.
我写了这段代码（发布到一个 PHP 页面），这样如果客人不输入他们的名字，它就会弹出一个警告框。但是，即使我在名称文本框中输入了一些内容并提交，警报框仍然会弹出，它会将 $_POST['gname'] 提交给服务器。
Here's the JavaScript:
这是 JavaScript：
<script type="text/javascript">
function gSubmit()
{
if (document.getElementById("gname").value.length === 0)
{
alert("For completing the form, it requires you to input a Name");
return false;
}
else
{
document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
window.location = "guestbook.php";
return true;
}
}
</script>
Here's the HTML:
这是 HTML：
<form id="guestbook" name="guestbook" method="post" action="guestbook.php">
<center>
<table border="0px">
<tr>
<td>
<p align="right">Name :</p></td><td> <input type="text" name="gname" id="gname" />
</td>
</tr>
<tr>
<td>
<p align="right">E-mail :</p></td><td><input type="text" name="gemail" />
</td>
</tr>
<tr>
<td>
<p align="right">Telephone No :</p>
</td>
<td>
<input type="text" name="gtpn" />
</td>
</tr>
<tr>
<td>
<p align="right">Product Order / Comment / Messages :</p>
</td>
<td>
<textarea name="gtxtfld" id="gtxtfld" cols="32"></textarea>
</td>
</tr>
</table>
<br /><br />
<input type="submit" value="submit" name="submit" onclick="gSubmit();" />
<input type="reset" value="reset" name="reset" />
</form>
回答by Abbas
Change your gSubmit()function to this:
将您的gSubmit()功能更改为：
if (document.getElementById("gname").value === "")
{
alert("For completing the form, it requires you to input a Name");
return false;
}
else
{
document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
return true;
}
In your html, change onclick="gsubmit()"to onclick="return gsubmit()".
在您的 html 中，更改onclick="gsubmit()"为onclick="return gsubmit()".
Note that your message in the else clause will not be displayed because the form would have submitted by then.
请注意，您在 else 子句中的消息将不会显示，因为届时表单将已提交。
Also, you have to compare the valueof gnamefield, not it's innerHTML. And it has to be compared to empty string (""), not space (" ").
此外，您必须比较valueofgname字段，而不是innerHTML. 它必须与空字符串 ("") 进行比较，而不是空格 (" ")。
回答by keyboardP
To check if the textbox has a value in it, you can use something like this:
要检查文本框是否有值，您可以使用以下方法：
if (document.getElementById("gname").value.length > 0)
{
alert("For completing the form, it requires you to input a Name");
//by returning false, you stop the submission from happening
return false;
}
else
{
document.getElementById("guestbook").innerHTML=("<p><b><center>Thank you for submitting the Guestbook");
return true; //allow the submission to go through
}
And in you're onclick event:
在你的 onclick 事件中：
onclick="return gSubmit();"
