Javascript JS中复选框的表单验证
我正试图做一个家庭作业，但遇到了一些问题。我应该用Javascript验证表单。现在，我试图确保用户至少选中了一个复选框（四个选项中的一个），以便表单提交。（我已经完成了其他验证部分的工作，因此这部分代码似乎存在局部问题。） 这是复选框表单的html格式：Javascript JS中复选框的表单验证,javascript,html,validation,Javascript,Html,Validation,我正试图做一个家庭作业，但遇到了一些问题。我应该用Javascript验证表单。现在，我试图确保用户至少选中了一个复选框（四个选项中的一个），以便表单提交。（我已经完成了其他验证部分的工作，因此这部分代码似乎存在局部问题。） 这是复选框表单的html格式： <fieldset> <input type="checkbox" name="boxes" id="member" value="member" /> <label for="member"&g
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
我是会员。
请把你的月刊寄给我
我很想听听演出前的活动
以上都没有
function validateForm() {
var checkBoxes = document.getElementsByName("boxes");
for (var i=0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked === true) {
return true;
break;
} else {
alert("At least one checkbox must be selected.");
return false;
}
}
}
函数validateForm（）{
var复选框=document.getElementsByName（“框”）；
对于（变量i=0；i<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> hw5 </title>
<link rel ="stylesheet" href="form.css"/>
<script src="form.js"></script>
<script src="states.js"></script>
<!--<script src="browser.js"></script>-->
</head>
<body>
<div>
<h1><b>Buy your tickets online</b></h1>
<form name="theForm" method="post" action="https://cs101.cs.uchicago.edu/~sterner/show-data.php" onsubmit="return validateForm(this)">
<section id="name-and-address">
<fieldset>
<h2 class="name">Full name</h2>
<label for="firstname">First name:</label> <input type="text" name ="firstname" id="firstname" autofocus="autofocus" />
<p><label for="lastname">Last name:</label> <input type="text" name ="lastname" id="lastname" /></p>
</fieldset>
<fieldset>
<h2 class="Billing Address">Billing Address</h2>
<label for="street">Street name and number:</label>
<input type="text" name ="street" id="street" />
<p><label for="city">City:</label>
<input type="text" name="city" id="city" /></p>
<p><label for="state">State:</label>
<select id="state" name="state">
</select></p>
<p><label for="zip">Zip code:</label>
<input type="text" name="zip" id="zip" /></p>
</fieldset>
</section>
<section>
<aside>
<fieldset>
<h2 class="payMethod">Method of Payment</h2>
<p class="row">
<input type="radio" id="pay-pal" name="payment" value="pay-pal" />
<label for="pay-pal">PayPal</label>
</p>
<p class="row">
<input type="radio" id="credit" name="payment" value="credit" />
<label for="credit">Credit Card</label>
</p>
</fieldset>
<fieldset>
<input type="checkbox" name="boxes" id="member" value="member" />
<label for="member">I'm a member.</label>
<p><input type="checkbox" name="boxes" id="newsletter" value="newsletter" />
<label for="newsletter">Please send me your monthly newsletter.</label></p>
<p><input type="checkbox" name="boxes" id="preshow" value="preshow" />
<label for="preshow">I'm interested in hearing about pre-show events.</label></p>
<p><input type="checkbox" name="boxes" id ="none" value="none" />
<label for="none">None of the above.</label></p>
</fieldset>
<fieldset>
<p><label for="email">Email address:</label>
<input type="email" name="email" id="email" /></p>
</fieldset>
</aside>
</section>
<section id="submit">
<fieldset>
<input type="submit" value="Buy my tickets."/>
</fieldset>
</section>
</div>
</body>
</html>
hw5
网上买票
全名
名字：
姓氏：
帐单地址
街道名称及编号：
城市：
声明：
邮政编码：
付款方式
贝宝
信用卡
我是会员。
请把你的月刊寄给我
我很想听听演出前的活动
以上都没有
电邮地址：
POST提交