jQuery Validate插件和NiceSelect：验证错误

Question

我正在使用jQuery Validator和jQuery Nice-Select插件，但是在尝试验证表单时遇到两个问题。看看：

这是html：

<form id="ads-form" data-aos="zoom-out-down" method="post" data-aos-duration="300" data-aos-delay="150" data-aos-once="true" id="the-form" class="cads-form">
  <!-- Form Fileds -->
  <div id="ads-section" class="ads-container">
    <label class="control-label label-cads">* State:</label>
    <select class="dropdown-content ads-n wide" id="ads-state" name="ads-state">
      <option data-display="Select State" selected></option>
      <option value="ST1">State 1</option>
      <option value="ST2">State 2</option>
      <option value="ST3">State 3</option>
    </select>
    
    <label class="control-label label-cads">* City:</label>
    <select class="dropdown-content n-city wide" id="ads-city" name="ads-city">
      <option data-display="Select City" selected></option>
      <option value="CT1">City 1</option>
      <option value="CT2">City 2</option>
      <option value="CT3">City  3</option>
    </select>
    
    
    <div class="text-center ca-button-wrap">
      <br/><br/>
      <button class="btn btn-default cads-button" id="ads-button" type="submit">NEXT <i class="fas fa-angle-double-right"></i></button>
    </div>
  </div>
</form>

CSS：

body {
  background-color: #0C2738;
}
form {
  margin: 2%;
}
.nice-select {
  margin: 1%;
}
button {
  margin: 1% 0 0 0;
}
.error {
  color: #DDAA40;
}

JS：

$(document).ready(function() {
  <!--Nice select Init -->
  $('#ads-state, #ads-city').niceSelect();
  <!--Validate Plugin-->
  $(function(){
        $("#ads-form").validate(
          {
            ignore: [],
            rules: 
            {
              'ads-state': 
              {
                required: true,
              },
              'ads-city': 
              {
                required: true,
              },
            },
            messages: 
            {
              'ads-state': 
              {
                required: "Select a State"
              },
              'ads-city': 
              {
                required: "Select a City"
              },
            }
        });
    });
  <!-- Remove error on Select change-->
   $('#ads-state').change(function () {
      $(this).valid();
   });
});

如果选择为空白，当我单击“下一步”按钮时，验证效果很好。但是，在选择状态时，仍会显示错误消息。 此外，选择“空”时，选择“城市”不会显示错误消息。可能会发生什么？

See an example here - Codepen link