免责声明：我只使用jQuery大约一周，HTML / CSS大约两周。
我有一个包含几个复选框和各种文本输入字段的表单。第一个复选框是#ship_to_billing。如果选中则隐藏并取消选中字段集#shipping_info。如果未选中，则字段集中的所有字段都必须具有某个值。因此，基本上必须选中ship_to_billing复选框，或者必须填写字段集字段以便用户提交表单，否则他们会收到警告，指示他们完成相应的区域。这一切都非常有效。但是，我刚刚在表单底部添加了一个额外的必需复选框，无法弄清楚如何将其合并到我当前的jQuery设置中。新复选框是#age_verification。需要独立于表单上的任何其他输入进行检查。如果没有，他们应该在继续之前收到警告以检查该框。在为最后一个复选框添加验证后，没有任何工作，它只是让用户提交表单而不填写或检查任何输入。
还想知道如果他们尝试提交表单而不填写任何内容或者可能有更好的方法，这样做是否会导致同时出现两个警报。
请注意HTML在表单内（表单action =“/ cart / add”method =“post”）
<a type="button" class="btn btn-primary" href="#product-options" data-toggle="modal">Buy This!</a>
<div class="modal hide fade" id="product-options">
<div class="modal-header center">
<a class="close" data-dismiss="modal">x</a>
<h3>When, Where and How?</h3>
</div>
<div class="modal-body l-m">
{% include 'datepicker' %}
<hr>
<input type="hidden" name="properties[ship_to_billing]" value="" />
<label for="ship_to_billing" style="max-width:335px;">
<input id="ship_to_billing" type="checkbox" name="properties[Ship to Billing Address]" value="Yes" {% if properties.ship_to_billing %} checked="checked"{% endif %} />
<font size=1>Check here to have items shipped to your billing address (collected during checkout). Otherwise please fill out the information below.</font>
</label><br />
<fieldset id="shipping_info">
<label for="shipping_name">Name of Recipient:</label>
<input class="input-xlarge" type="text" id="shipping_name" placeholder="Name" name="properties[Recipient]" />
<label for="address_street">Shipping Address:</label>
<input class="input-xlarge" type="text" id="address_street" placeholder="Street Address" name="properties[Address]" />
<input class="input-xlarge" type="text" id="address_city" placeholder="City" name="properties[City]" />
<input class="input-medium" type="text" id="address_province" placeholder="State" name="properties[State]" />
<input class="input-medium" type="text" id="address_zip" placeholder="Zip Code" name="properties[Zip]" />
</fieldset>
<p>
<label for="gift_msg">Gift Message : (optional)</label>
<textarea id="gift_msg" placeholder="Please type your message" name="properties[Gift Message]" rows="4" cols="45"></textarea>
</p>
<p>
<input type="hidden" name="properties[age_verified]" value="" />
<label for="age_verified" style="max-width:335px;">
<input id="age_verification" type="checkbox" name="properties[Age Verified]" value="Yes" {% if properties.age_verified %} checked="checked"{% endif %} required="required" />
<font size=1>This gift contains alcohol. By checking this box you certify you are 21yrs of age or older. An adult signature with ID will be required upon delivery.</font>
</label>
</p>
</div>
<div class="modal-footer">
<div class="btn-group">
<button href="#" class="btn" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="return validateShipping();" id="addtocart">Add To Cart</button>
</div>
</div>
</div>
然后是jQuery：
<script>
// Hides shipping info fieldset if ship to billing is checked
$(function(){
$("#ship_to_billing").change(function(){
if ($(this).is(":checked"))
$("#shipping_info").hide();
else
$("#shipping_info").show();
});
});
// Validates address fields are filled out unless ship to billing is checked...
function validateShipping() {
if (!$("#ship_to_billing").is(":checked")) {
var inputs = $("#shipping_info input");
var ready = true;
inputs.each(function(){
if ($(this).val() == '') {
ready = false;
return false;
}
});
if (!ready) {
alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!");
return false;
}
}
return true;
}
// This is where my trouble is
if (!$('#age_verified').is(':checked')) {
alert("Please check box to verify you are 21 years of age or older.");
return false;
}
});
</script>
答案 0 :(得分：3)
将您的年龄if语句移至验证功能中，我认为您需要
#age_verification
而不是
#age_verified
// Hides shipping info fieldset if ship to billing is checked
$(function () {
$("#ship_to_billing").change(function () {
if ($(this).is(":checked")) $("#shipping_info").hide();
else $("#shipping_info").show();
});
});
// Validates address fields are filled out unless ship to billing is checked...
function validateShipping() {
if (!$("#ship_to_billing").is(":checked")) {
var inputs = $("#shipping_info input");
var ready = true;
inputs.each(function () {
if ($(this).val() == '') {
ready = false;
return false;
}
});
if (!ready) {
alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!");
return false;
}
}
// This is where my trouble is
if (!$('#age_verification').is(':checked')) {
alert("Please check box to verify you are 21 years of age or older.");
return false;
}
return true;
}
答案 1 :(得分：1)
这感觉就像你的第一个Require fieldset after checkbox checked ...;）
的第二部分您已经关闭，您只需要在validateShipping函数中包含验证，然后再返回任何其他内容，并将您的jQuery语句中的ID更新为age_verification（如Sergio所提到的）。 ..之类的：
// Validates address fields are filled out unless ship to billing is checked...
function validateShipping() {
// if this function returns false, none of the other code will execute...
if (!$('#age_verification').is(':checked')) { // updated..!
alert("Please check box to verify you are 21 years of age or older.");
return false;
}
if (!$("#ship_to_billing").is(":checked")) {
var inputs = $("#shipping_info input");
var ready = true;
inputs.each(function(){
if ($(this).val() == '') {
ready = false;
return false;
}
});
if (!ready) {
alert("Please tell us where to send this. Either choose ship to Billing Address or fill out the Recipient Name and Shipping Address fields. Thanks!");
return false;
}
}
return true;
}
答案 2 :(得分：1)
您的age_verified验证不属于任何功能。它不应该在验证功能中吗？