jQuery Проверить плагин и 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();
   });
});

Когда я нажимаю кнопку «Далее», если выбраны пустые, проверка работает отлично. Но при выборе состояния сообщение об ошибке все равно отображается. Кроме того, при выборе «Город» не отображается сообщение об ошибке при выборе пустого параметра. Что может происходить?

См. Пример здесь - Ссылка Codepen