Require fieldset after checkbox checked

Question

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!

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>

Answer 1

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! :)

EDIT 1:

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.

Answer 2

As far as client-side validation, you could give all the inputs inside the shipping_info fieldset the required attribute like this

$('#shipping_info input').attr('required', true);

But this doesn't guarantee the fields will be filled, as the user can bypass this. So you have to check it server-side whatever you do.