Issue with multiple checkboxes

Question

Disclaimer: I have only been working with jQuery for about a week and HTML/CSS for about two weeks.

I have a form that contains a couple of checkboxes and various text input fields. The first checkbox is #ship_to_billing. If checked it hides and unrequires the fieldset #shipping_info. If it is not checked then all of the fields within the fieldset must have some value. So, basically either the ship_to_billing checkbox must be checked OR the fieldset fields must be filled out in order for the user to submit the form, otherwise they get an alert instructing them to complete the appropriate areas. That's all working excellently on its own. But, I just added an additional required checkbox at the bottom of the form and can't figure out how to incorporate it into my current jQuery setup. The new checkbox is #age_verification. It needs to be checked independent of any of the other inputs on the form. If not, they should receive an alert to check the box before proceeding. After adding validation for that last checkbox, nothing is working, it just lets the user submit the form without filling out or checking any of the inputs.

Also wondering if doing this will result in potentially two alerts popping up at the same time if they try to submit the form without filling in anything or if there might be a better way to go.

Note the HTML is within a form (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>      

And then the 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>

Answer 1

Your age_verified validation is outside of any function. Shouldn't it be in a validation function?

Answer 2

This feels like part two to your first Require fieldset after checkbox checked... ;)

You're close, you just need to include the validation inside the validateShipping function, before anything else is returned, and update your ID on your jQuery statement to age_verification (as Sergio mentioned)...something like:

// 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;
}

Answer 3

Move your age if statement to inside the verification function and I think you want

#age_verification

instead of

#age_verified

FIddle

// 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;
}