jQuery Validator Not Working for DropDownList

Question

I have two dropdownlists:

<div class="row">
    <div class="form-group col-md-6">
        <label class="col-md-4 control-label">Operation: <span class="fa fa-asterisk text-danger"></span></label>
        <div class="col-md-8">
            @Html.DropDownListFor(model => model.Operation, ViewBag.Operation as List<SelectListItem>, new { @class = "form-control" })
            <br />
            @Html.ValidationMessageFor(model => model.Operation, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group col-md-6" id="COAType-div">
        <label class="col-md-4 control-label">COA Type: <span class="fa fa-asterisk text-danger"></span></label>
        <div class="col-md-8">
            @Html.DropDownListFor(model => model.COA_Type, ViewBag.COA_Type as List<SelectListItem>, new { @class = "form-control" })
            <br />
            @Html.ValidationMessageFor(model => model.COA_Type, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

COA_Type does not have a Required Data Annotation in the model because, if Operation's value is 2 then that is the only time I want COA_Type to be required.. but if Operation is anything but 2.. then it does not have to be required.

var onLoadValue = $("#Operation").val();
if (onLoadValue === "2") {
    $("#COAType-div").show();
} else {
    $("#COAType-div").hide();
    $("#COA_Type").val("");
}

$("form").validate({
    rules: {
        COA_Type: {
            required: function() {
                if ($("#Operation").val() === "2") {
                    console.log("tttt"); // for testing.. to see if it worked. Obviously not working
                    return true;
                } else {
                    return false;
                }
            }
        }
    },
    submitHandler: function () {
        e.preventDefault();

        var newUrl = redirectUrl + "?aId=" + aId + "&date=" + date;


        $.ajax({
            method: "POST",
            url: infoGetUrl,
            data: $("form").serialize(),
            success: function (data) {
                toastr.options = {
                    onHidden: function () {
                        window.location.href = newUrl;
                    },
                    timeOut: 1500
                }
                toastr.success("Successfully Edited.");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var status = capitalizeFirstLetter(textStatus);
                toastr.error(status + " - " + errorThrown);
            }
        });
    }
});

I have tested.. and made the Operation val equal 2.. and the COA_Type ddl is not being validated..

How do I validate this?

UPDATE

Instead of putting the rules right below validate.. I rewrote it this way:

$("form").validate({
    submitHandler: function () {

        var newUrl = redirectUrl + "?aId=" + aId + "&date=" + date;


        $.ajax({
            method: "POST",
            url: infoGetUrl,
            data: $("form").serialize(),
            success: function (data) {
                toastr.options = {
                    onHidden: function () {
                        window.location.href = newUrl;
                    },
                    timeOut: 1500
                }
                toastr.success("Successfully Edited.");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                var status = capitalizeFirstLetter(textStatus);
                toastr.error(status + " - " + errorThrown);
            }
        });
        return false;
    }
});

$("#COA_Type").rules("add",
{
    required: function () {
        if ($("#Operation").val() === "2") {
            console.log("tttt");
            return true;
        } else {
            return false;
        }
    }
});

Now, the console.log("tttt"); is being hit and when I click submit.. the COA_Type DDL is being outlined in red if it is null bc of the input-validation-error but the form is still submitting. Also, when I check the console about the "tttt" I am getting 2 instances of it.. so in the console it looks like:

tttt
tttt