自定义验证后无法清除jQuery Validation错误消息

Question

我正在尝试添加信用卡到期日的验证，以确保填充了月份和年份，但是它们只有一个标签要突出显示，因此必须遵循一个验证规则。

此jsfiddle中的代码几乎可以正常工作，但是如果您选择月份然后是一年，则在选择年份下拉菜单时会显示错误消息，但是单击年份时错误消息不会消失。

https://jsfiddle.net/47auhvtz/

在我自己的这段代码中，它确实删除了红色样式，但没有删除文本。

此错误消息

变成这样：

这里缺少什么？有更好的方法吗？

代码如下所示：

HTML

<form id="frmCreateAgreement" class="form-horizontal" data-toggle="validate" role="form">
  <div class="form-group col-sm-12">
      <label for="selCardExpiryDate" class="control-label col-lg-5 col-md-3 col-sm-4">Expiry Date</label>
      <div class="card-date">
          <div class="col-lg-3 col-md-4 col-sm-4">
              <select id="selCardExpiryMonth" name="CardExpiryMonth" class="form-control card-month">
                  <option value="" selected>Month</option>
                  <option value="01">01</option>
                  <option value="02">02</option>
                  <option value="03">03</option>
              </select>
          </div>
          <div class="col-lg-4 col-md-5 col-sm-4">
              <select id="selCardExpiryYear" class="form-control card-year">
                  <option value="" selected>Year</option>
                  <option value="2018">2018</option>
                  <option value="2018">2019</option>
                  <option value="2018">2020</option>                
              </select>
          </div>
      </div>    
  </div>
</form>

JavaScript

$(document).ready(function () {

    jQuery.validator.addMethod("cardDate", function (value, element) {
    var cardDate = $(element).parents('.card-date');
    var cardMonth = cardDate.find('.card-month').val();
    var cardYear = cardDate.find('.card-year').val();
    return this.optional(element) || (cardMonth.length > 0 && cardYear.length > 0);        
}, function (params, element) {
        return 'Month and year required'
});


$('#frmCreateAgreement').validate({
    rules: {
        CardExpiryMonth: {
            required: true,
            cardDate: true
        }
    }        
});

}）;