免責事項: jQuery を使用して約 1 週間、HTML/CSS を使用して約 2 週間しか作業していません。
いくつかのチェックボックスとさまざまなテキスト入力フィールドを含むフォームがあります。最初のチェックボックスは #ship_to_billing です。チェックすると、フィールドセット #shipping_info が非表示になり、不要になります。チェックされていない場合、フィールドセット内のすべてのフィールドに何らかの値が必要です。したがって、基本的に、ユーザーがフォームを送信するには、ship_to_billing チェックボックスをオンにするか、フィールドセット フィールドに入力する必要があります。それはすべて、それ自体でうまく機能しています。しかし、フォームの下部に必要なチェックボックスを追加しただけで、現在の jQuery セットアップに組み込む方法がわかりません。新しいチェックボックスは #age_verification です。フォームの他の入力とは独立してチェックする必要があります。そうでない場合は、先に進む前に、ボックスをチェックするよう警告を受け取る必要があります。最後のチェックボックスの検証を追加した後、何も機能せず、ユーザーは入力を入力またはチェックせずにフォームを送信できます。
また、これを行うと、何も入力せずにフォームを送信しようとすると、同時に 2 つのアラートがポップアップする可能性があるかどうか、またはより良い方法があるかどうか疑問に思っています.
HTML がフォーム内にあることに注意してください (form 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>