提交时的 Javascript 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5711175/
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 form validation onsubmit
提问by James Titus
I am trying to validate this form before it is submitted to the order form page using 'onsubmit' event, but it's not working. Not sure what I'm doing wrong. Also, how do I submit the product(s) selected with price and product ID on to an order form page? I need to use form controls to allow the user to put in personal and billing info (name, address, etc.) Any help with this would be appreciated.
我试图在使用“onsubmit”事件提交到订单页面之前验证此表单，但它不起作用。不知道我做错了什么。另外，我如何将使用价格和产品 ID 选择的产品提交到订单页面？我需要使用表单控件来允许用户输入个人和帐单信息（姓名、地址等）。对此的任何帮助将不胜感激。
Here's my code I'm trying to validate with 'onsubmit':
这是我尝试使用“onsubmit”验证的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Javascript - Shopping Cart</title>
<script type="text/javascript" charset="utf-8">
function checkCheckBoxes( ) {
if (document.frmTest.product1.checked == false &&
document.frmTest.product2.checked == false &&
document.frmTest.product3.checked == false &&
document.frmTest.product4.checked == false)
{
alert ('You must select a product to continue.');
return false;
}
else
{
return true;
}
}
</script>
</head>
<body>
<h1>Shopping Cart - Product Page</h1>
<form name="product" method="post" action="" onsubmit="return checkCheckBoxes( );" >
<div id="product1">
<p id="title1"><b>Desktop Computer</b></p>
<img src="images/desktop.jpg" alt="desktop" width="100"/>
<p>The latest in desktop computing.</p>
<p><input type="checkbox" name="product1" id="001">Price 9.99</p>
</div>
<div id="product2">
<p id="title2"><b>Monitor</b></p>
<img src="images/monitor.jpg" alt="monitor" width="100"/>
<p>21 inch monitor</p>
<p><input type=checkbox name="product2" id="002">Price 9.99</p>
</div>
<div id="product3">
<p id="title3"><b>Keyboard</b></p>
<img src="images/keyboard.jpg" alt="keyboard" width="100"/>
<p>USB Keyboard</p>
<p><input type=checkbox name="product3" id="003">Price .99</p>
</div>
<div id="product4">
<p id="title4"><b>Mouse</b></p>
<img src="images/mouse.jpg" alt="mouse" width="100" />
<p>USB Keyboard</p>
<p><input type=checkbox name="product4" id="004">Price .99</p>
</p>
</div>
<br />
<input type="submit" value="Submit" name="submit" onClick="cart()";/><input , type="reset" value="Reset" name="reset">
</form>
</body>
</html>
采纳答案by joshhendo
Try changing your if statement to use getElementById. I ran your code, but instead used the if statement:
尝试更改 if 语句以使用 getElementById。我运行了你的代码，但使用了 if 语句：
if ( (document.getElementById("001").checked == false) &&
(document.getElementById("002").checked == false) &&
(document.getElementById("003").checked == false) &&
(document.getElementById("004").checked == false))
and it worked.
它奏效了。
回答by jessegavin
Change
改变
<form name="product"
to
到
<form name="frmTest"
回答by lyle
If you install a debugger like Firebug, you can call
如果你安装了像 Firebug 这样的调试器，你可以调用
checkCheckBoxes( );
manually in the console (without submitting the form), so that you can see the error messages generated by the function, which in this case is
在控制台中手动（不提交表单），以便您可以看到函数生成的错误消息，在这种情况下是
TypeError: document.frmTest is undefined
Since the name of the form is "product", "document.frmTest..." should probably be called "document.product..." instead.
由于表单的名称是“product”，“document.frmTest...”应该被称为“document.product...”。
