Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 271
  • Last Modified:

jquery validation pluggin checkbox required IF certain radio buttons have been selected

Hi Experts.  I'm trying to get the following scenario to work and after several hours I'm no closer to getting it right!!!

User has the option to choose "Email" or "US Mail" for 3 products.

IF they choose "Email" for any of the 3, I'm trying to display the "Consent" div and require that they check the I agree checkbox.  If they change their mind and all 3 products are "US Mail" then the "Consdent div" should be hidden and not required.

As usuall thank you so much for your time.



<form id="Shipping" method="post" action="?">
  <table>
    <tr>
      <td></td>
      <td>E-Mail</td>
      <td>U.S. Mail</td>
    </tr>
    <tr>
      <td>Product 1 </td>
      <td><input type="radio" name="Product1" id="Product1_yes" value="y" class="Deliver" /></td>
      <td><input type="radio" name="Product1" id="Product1_no" value="no" /></td>
    </tr>
    <tr>
      <td>Product 2 </td>
      <td><input type="radio" name="Product2" id="Product2_yes" value="y" class="Deliver" /></td>
      <td><input type="radio" name="Product2" id="Product2_no" value="no" /></td>
    </tr>
    <tr>
      <td>Product 2 </td>
      <td><input type="radio" name="Product3" id="Product2_yes" value="y" class="Deliver" /></td>
      <td><input type="radio" name="Product3" id="Product2_no" value="no" /></td>
    </tr>
    <tr>
      <td colspan="3">
        <div id="Consent_div" class="Consent"> 
        I agree blah blah, blah
        <input id="Delivery_Agree" name="Delivery_Agree" value="Y" type="checkbox" />
        <span class="agree">I agree to e-delivery terms and conditions.</span>
        </div></td>
    </tr>
  </table>
</form>
<script type="text/javascript">
$.metadata.setType("attr", "validate");
$(document).ready(function() {	
	("#Consent_div").hide();
	 $('.Deliver').click(function() {
	 /*I'm trying to display the consent div if user has selected "EMAIL" for product1, 2 or 3  */
        if($(this).val() == 'y') {
            $("#eConsent_div").show();
        } else {
            $("#eConsent_div").hide();
        }
    });
	 
	$("#Shipping").validate({						  
		rules: {
			Product1: "required",
			Product2: "required",
			Product3: "required",
			Delivery_Agree: {
			/* Delivery_agree is required if user has selected email for any products*/	
				required: "#Product1_yes:checked" OR Product2_yes:checked OR product3_yes:checked
			}
		}
	});
	
	

});
</script>
</body></html>

Open in new window

0
whaleyk
Asked:
whaleyk
  • 6
  • 3
1 Solution
 
Erdinç Güngör ÇorbacıPHP Development Team LeaderCommented:
Sorry if i couldn't see , but which validator plugin do you use.

I advise jquery validator engine

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

and you can combine your own control procedures with this

onBeforeAjaxFormValidation and
onAjaxFormComplete would be helpful better control with your own function.


Use a form element like this

<input value="" class="validate[required,funcCall[checkHELLO]]" type="text" id="lastname" name="lastname" />


And the function ;

function checkHELLO(field, rules, i, options){
      if (field.val() != "HELLO") {
         // this allows the use of i18 for the error msgs
         return options.allrules.validate2fields.alertText;
      }
    }
0
 
whaleykAuthor Commented:
Sorry, I'm using http://bassistance.de/jquery-plugins/jquery-plugin-validation/  This is the final page of many, so I'd really rather stick with it.  Thx for taking a look.
0
 
Kyle HamiltonData ScientistCommented:
Some of your code was giving me an error, so I commented it out. Maybe my validate script is old, I don't know.

In any case, here is a working version of the show/hide functionality:

show/hide div depending on :checked value
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
whaleykAuthor Commented:
Kozaiwaniec, thank you so much... the "change" function is what I was looking for (instead of the click function).  I'd like to award you thte points for this part of my problem.  I'll repost the challenge I have with the "required" checkbox separately.  Thank you very much for the code sample... I'm learning as I go!!

K
0
 
whaleykAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for whaleyk's comment http:/Q_27398545.html#36976372
Assisted answer: 500 points for kozaiwaniec's comment http:/Q_27398545.html#36976331

for the following reason:

I posted 2 problems (Kozaiwaniec kindly posted code that helped me with one problem. &nbsp;I'm reposting the 2nd problem separately as I should have done in the first place.)
0
 
whaleykAuthor Commented:
I didn't mean to accept my own comment!!!  I meant to accept kozaiwaniec's suggestion!  Sorry.
0
 
whaleykAuthor Commented:
If anyone else has a similar need, here is the working script.  Thx again.


<form id="Shipping" method="post" action="?">
            <table>
                <tr>
                    <td></td>
                    <td>U.S. Mail</td>
                    <td>E-Mail</td>
                </tr>
                <tr>
                    <td>Product 1 </td>
                    <td><input type="radio" name="Product1" id="Product1_yes" value="Yes" class="Deliver" /></td>
                    <td><input type="radio" name="Product1" id="Product1_no" value="No" /></td>
                </tr>
                <tr>
                    <td>Product 2 </td>
                    <td><input type="radio" name="Product2" id="Product2_yes" value="Yes" class="Deliver" /></td>
                    <td><input type="radio" name="Product2" id="Product2_no" value="No" /></td>
                </tr>
                <tr>
                    <td>Product 2 </td>
                    <td><input type="radio" name="Product3" id="Product2_yes" value="Yes" class="Deliver" /></td>
                    <td><input type="radio" name="Product3" id="Product2_no" value="No" /></td>
                </tr>
                <tr>
                    <td colspan="3">
                        <div id="Consent_div" class="Consent"> 
                            I agree blah blah, blah
                            <input id="Delivery_Agree" name="Delivery_Agree" value="Yes" type="checkbox" />
                            <span class="agree">I agree to e-delivery terms and conditions.</span>
                        </div></td>
                </tr>
            </table>
        </form>
        <script>
            $(function() {  
              $("#Consent_div").hide();
              $('input').change(function() {
                 if ($('.Deliver').is(':checked')){
                     $("#Consent_div").show();                   
                } else {
                     $("#Consent_div").hide();
                    }
                     
              });
                  
               
                $("#Shipping").validate({                                                 
                    rules: {
                        Product1: "required",
                        Product2: "required",
                        Product3: "required",
                        Delivery_Agree: {
		/* if any radio button with a class of "deliver" is checked then validate "delivery_agree"*/	
        		   required: function(element) 
			{return $(".Deliver").is(':checked')}
						}
                    }
                });
        
        

            });
        </script>

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
try this for the validate issue:

 
$("#Shipping").validate({                                                 
                    rules: {
                        Product1: "required",
                        Product2: "required",
                        Product3: "required",
                        Delivery_Agree: {
                            required: {
                                        depends: function(element) {
                                                   return $(".Deliver:checked")
                                        }
                                      }
                                    }
                                }
                });

Open in new window


Have you posted the new question yet? I'd like to help you out...
0
 
whaleykAuthor Commented:
I actually figured it out :-)  

Thx again... i'll be back again soon (I'm sure!!) :

 $("#Shipping").validate({                                                
                    rules: {
                        Product1: "required",
                        Product2: "required",
                        Product3: "required",
                        Delivery_Agree: {
            /* if any radio button with a class of "deliver" is checked then validate "delivery_agree"*/      
                       required: function(element)
                  {return $(".Deliver").is(':checked')}
                                    }
                    }
                });
0
 
Kyle HamiltonData ScientistCommented:
Cheers
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now