Jquery Validate Plugin- Radio buttons & dependent fields
Hey folks!
I'm pretty new to Jquery and the coding side of things in general, so please excuse my noobishness. I'm still learning! Anyway, my problem is that I have some radio buttons on a form that depending on which option is picked, a text input field is displayed. I want to have the radio buttons required as well as the text input field if it's shown. I can't figure out how to set up the validation for that. If someone could post an example of how I might do this, I'd be MOST grateful! I'll post some code-snippets below to help clarify things.
Radio buttons and Show/Hide div with text field:
- <label for="delivery_method">*Delivery or In-Store Pickup?</label><br />
- <input type="radio" id="delivery_method" name="delivery_method" value="Delivery" onchange="delivery_method_change();" /> Delivery
- <input type="radio" id="delivery_method" name="delivery_method" value="In-Store Pickup" onchange="delivery_method_change();" /> In-Store Pickup<br /><br />
- <div id="delivery_address_div">
- <label for="delivery_address">Delivery Address:</label> (No P.O. Boxes please!)<br />
- <textarea id="delivery_address" name="delivery_address" rows="2" cols="30"></textarea>
- </div>
My show/hide div script in head:
- <script>
- function delivery_method_change(){
- if (document.digital_copy_order_form.delivery_method[0].checked==true){
- $("#delivery_address_div").show();
- }else{
- $("#delivery_address_div").hide();
- }
- }
- </script>
What I want to do:
- Both "delivery_method" radio buttons made required fields, forcing the user to select a delivery method before form can be submitted successfully.
- If the user selects delivery for their option, "delivery_address" field is revealed and also made a required field (since it would do us no good to know a user wants their order delivered but we don't know where to ship to!)
Thanks!
-Chris