Removing validation rules if user selects specific element

Removing validation rules if user selects specific element

I'm having trouble figuring out the proper syntax for removing validation rules with the jQuery Validate plugin (by Jörn Zaefferer).  I need to remove 3 validation rules in the event that the user selects a specific radio button (in this case specifying that they are male).

I've tried inserting an If/Else statement as well as creating an onclick function, but I don't think I'm doing it properly because I can't seem to get either method to work properly.  I've included the code that I've tried below.

Validation Script
  1. $(document).ready(function() {
        // validate signup form on keyup and submit
        var validator = $("#customer_info").validate({
            rules: {
                 fname: "required",
                lname: "required",
                user_name: {
                    required: true,
                },
                password: {
                    required: true,
                },           
                email: {
                    required: true,
                },                       
                terms: "required",
            },
            messages: {
                fname: "",
                lname: "",       
                user_name: {
                    required: "",
                        remote: jQuery.format('</br>User Name {0} already in use'),
                    },
                password: "",   
                 email: {
                required: "",
                    email: "</br>Please enter a valid email address"},
                terms: "</br>Please accept the terms of our privacy policy",
                },       
            errorLabelContainer: "#messageBox",
                        submitHandler: function () {
                            jQuery(form).ajaxSubmit({
                            });

                        }
                    });
                });






































Methods I've Tried

If/Else



I've tried several variations of:
  1. var validator = $("#customer_info").validate(

  2.     if ($gender==="male") {
         $(this).rules("remove", "user_name password terms");      
        } else 



  3.     {rules: {
  4. ...
including switching (this) for ("#customer_info").

I also tried removing all the rules
  1. $(this).rules("remove");
and specifying ("remove", "required");

Creating a Separate Function

I also tried creating a separate function which would be triggered onclick

HTML
  1.   <label>Male</label><input name=gender type=radio value=male onclick="change();">
Javascript

Method 1


  1.  function change(){
  2.   $("#customer_info").rules("remove", "user_name password terms");    
  3. }
Method 2
  1.  function change(){
  2.      $("#user_name").rules("remove", "required");
  3.   $("#password").rules("remove", "required");
  4.   $("#terms").rules("remove", "required");
  5. }