作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我上周刚刚开始学习 HTML/CSS、javascript 和 jQuery,非常感谢一些帮助。我创建了一个带有复选框 (id #ship_to_billing) 的表单,然后创建了一个包含 5 个文本字段的字段集 (id #shipping_info)。我使用 JQuery 将其设置为,如果选中该复选框,它将切换其他字段并隐藏它们。但是,我不知道如何额外要求其中之一,要么必须选中复选框,要么必须填写字段集中的所有文本字段。我不需要警报。请帮忙!
提前谢谢大家,苏珊
<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(删节):
<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>
接下来,您的脚本稍微更健壮:
<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>
嗯,这是我根据原始问题中的有限信息所能给出的最佳解释。希望这可以帮助! :)
编辑 1:
抱歉!我遗漏了一个右括号 )
在我的 JavaScript 代码的第 10 行!我已经解决了这个问题,并且将上面的代码复制/粘贴到 HTML 页面中似乎工作正常。请记住将您的 jQuery 脚本包含在其余脚本之上,并将您的脚本放在 <head>...</head>
中。 HTML 部分。
关于jquery - 选中复选框后需要字段集,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18969878/
我是一名优秀的程序员,十分优秀!