Remove jQuery element validation from a specific element

Question

I have form with jQuery validation defined as follows.

 //#costCalculation is a form id
 $('#costCalculation').validate({

    onsubmit: false, //To prevent validation during form submit
       errorClass: "my-error-class",

    rules: {
        adSizeFull: {
            required: true
        },
        fullAdNo: {
            required: true
        }  
    },
    messages: {

        adSizeFull: "Please select Full adsize",
        fullAdNo: "Please select total Ads(Full)"
    },
    submitHandler: function (form) { // for demo
        //alert('valid form');
        return true;
    }
});

I have a form with select box like this

<div class="row">
         <div class="col-sm-6">
         <div class="form-group">
           <label class="control-label col-xs-4">Ads(Full):</label>
           <div class="col-xs-8">
              <select name="adSizeFull" id="fullads-list" class="form-control" onchange="fullAdSizeChange()">
                 <option value="">--Select--</option>
              </select>
           </div>
         </div>
         </div>
         <div class="col-sm-6">
            <div class="form-group">
             <label class="control-label col-xs-4" for="fullAdNo">#:</label>     
             <div class="col-xs-8">
               <select name="fullAdNo" id="fulladnos-list" class="form-control" onchange="fullAdNoChange()">
                 <option value="">--Select--</option>
               </select>
             </div>
         </div>
         </div>
        </div>

I would like to remove validation in the following scenario JS

function fullAdSizeChange() {
  var adSizeFull = $("#fullads-list").val();
  var fullAdNo = $("#fulladnos-list").val();
    if(adSizeFull == "" && fullAdNo == "") {
            $("#fullads-list").rules("remove", "required");
            $("#fulladnos-list").rules("remove", "required");  
        }
}

How to remove the validation from specific elements if the form is specified as above??

I haven't copied the entire code. There may problems in syntaxes. I need guidelines only to implement this

Answer 1

jQuery Validate actually directly supports dependency expressions .

All you need to do is change your validate options like this:

parent: {
  required: function(element) {
    return $("#age").val() < 13;
    // Makes "parent" required only if age is below 13.
  }

Full Example:

$( "#myform" ).validate({
  rules: {
    age: {
      required: true,
      min: 3
    },
    parent: {
      required: function(element) {
        return $("#age").val() < 13;
      }
    }
  }
});
}

Answer 2

just add the required class in both select box class no need to add change event

          <select name="adSizeFull" id="fullads-list" class="form-control required" onchange="fullAdSizeChange()">
             <option value="">--Select--</option>
          </select>