复选框选中后需要字段集 [英] Require fieldset after checkbox checked
问题描述
我刚刚开始学习HTML / CSS，javascript和jQuery上周，将非常感谢一些帮助。
我创建了一个带有复选框（id #ship_to_billing）和一个包含5个文本字段的字段集（id #shipping_info）的表单。使用JQuery我已经设置了，如果这样，如果复选框被选中，它切换其他字段和隐藏他们。但是，我不知道如何额外需要一个或另一个，要么复选框必须检查或字段集中的所有文本字段必须完成。我不需要警报。请帮忙！
I just started learning HTML/CSS, javascript and jQuery last week and would very much appreciate some help. I have created a form with a checkbox (id #ship_to_billing) and then a fieldset (id #shipping_info) containing 5 text fields. Using JQuery I've set it up so that, if that if the checkbox is checked, it toggles the other fields and hides them. But, I cannot figure out how to additionally require one or the other, either the checkbox has to be checked or all of the text fields within the fieldset must be completed. I do not need an alert. Please help!
先感谢所有人，Susan
Thank you all in advance, Susan
<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' %}
<p>
<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 />
</p>
<div class="fieldgroup" 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]" required="required" />
<p>
<label for="address_street">Shipping Address:</label>
<input class="input-xlarge" type="text" id="address_street" placeholder="Street Address" name="properties[Address]" required="required" />
<input class="input-xlarge" type="text" id="address_city" placeholder="City" name="properties[City]" required="required" />
<input class="input-medium" type="text" id="address_province" placeholder="State" name="properties[State]" required="required" />
<input class="input-medium" type="text" id="address_zip" placeholder="Zip Code" name="properties[Zip]" required="required" />
</p>
</div>
<p>
<label for="gift_msg">Gift Message :</label>
<textarea id="gift_msg" placeholder="Please type your message" name="properties[Gift Message]" rows="4" cols="45"></textarea>
</p>
</div>
<div class="modal-footer">
<div class="btn-group">
<button href="#" class="btn" data-dismiss="modal">Cancel</button>
<button type="submit" onclick="return validateShipping();" class="btn btn-primary" id="addtocart">Add To Cart</button>
</div>
</div>
</div>
JQUERY：
<script>
$('#ship_to_billing').change(function(){
$('#shipping_info').toggle('show');
});
</script>
推荐答案
客户端验证总是第二最好的服务器端验证，因为用户可以永远禁用Javascript或强制后废话，可以覆盖浏览器的能力，但你的服务器不能被轻视！也就是说，你是在正确的轨道，虽然我会诱惑解决它一点...首先，你的HTML（abridged）：
Client-side validation is always going to fall second-best to server-side validation, as the user can always disable Javascript or force-post nonsense that can override browser ability, but your server can't be fooled as easily! That said, you're on the right track, although I'd be tempted to fix it up a little...first, your HTML (abridged):
<form method="post">
<input id="ship_to_billing" type="checkbox" name="properties" />
<div class="fieldgroup" id="shipping_info">
<input type="text" id="shipping_name" name="properties[Recipient]" />
<input type="text" id="address_street" name="properties[Address]" />
...
</div>
<input type="submit" onclick="return validateMyStuff();" value="Submit" />
</form>
接下来，您的脚本更加健壮：
Next, your script, slightly more robust:
<script src="/path/to/jquery.js"></script>
<script type="text/javascript">
// this will run when the document's done loading...
$(function(){
$("#ship_to_billing").change(function(){
// make sure of the checked state...
// hide the fields if the checkbox is checked...
// 'this' is the checkbox...
if ($(this).is(":checked")) // fixed error here! ;)
$("#shipping_info").hide();
else
$("#shipping_info").show();
});
});
// validate the input, only if the checkbox is not checked...
// this will be called when your submit button is clicked...
function validateMyStuff() {
if (!$("#ship_to_billing").is(":checked")) {
// check to see that the other input fields have values...
var inputs = $("#shipping_info input");
var ready = true;
inputs.each(function(){
// 'this' is the current input we're validating...
if ($(this).val() == '') {
ready = false;
return false; // exits jQuery '.each' function...
}
});
if (!ready) {
alert("You forgot to fill in something!");
return false;
}
}
return true;
}
</script>
好吧，这是我可以根据原始问题中的有限信息给出的最佳解释。希望这可以帮助！ ：）
Well, that's the best interpretation I can give based on the limited information in the original question. Hope this helps! :)
编辑1：
EDIT 1:
道歉！我在我的JavaScript代码的第10行中省略了一个结束括号）我已经解决了这个问题，并将上面的代码复制/粘贴到一个HTML页面似乎工作正常。请记住将jQuery脚本包含在其余脚本之上，并将脚本放在HTML的< head> ...< / head> 部分。
My apologies! I left out a closing bracket ) on line 10 of my JavaScript code! I've fixed the problem, and copy / pasting the code above into an HTML page seems to work fine. Remember to include your jQuery script above the rest of your scripts, and to put your scripts in the <head>...</head> section of your HTML.
这篇关于复选框选中后需要字段集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
