使只有目标李消失/重新出现在场地变化

无论何时更改或修改输入或选择字段，都可以向插件请求验证。如果结果是"form valid"，你可以隐藏错误菜单。否则，您将以这种方式触发验证器的invalidHandler事件。在此事件中，您可以隐藏有效的字段。

所以，你可以把所有的归约为这个函数:

$('input, select').on('input change', function() {
    if ($("#form-jsvalidate").valid()) {
        $('.error-menu li').hide();
    }
});

在$("#form-jsvalidate")里面。验证({您需要添加:

invalidHandler: function(event, validator) {
        if (validator.errorList.length > 0) {
            $('.error-menu li').show();
        }
        validator.successList.forEach(function(element, index) {
            $('.error-menu li a[href="#' + $(element).prev().attr('for') 
                  + '"]').closest('li').hide();
        });
    }

代码片段:

function save_page(obj) {
}
$(function () {
  $("#form-jsvalidate").validate({
    rules: {
      "firstName": {
        required: true
      },
      "lastName": {
        required: true
      },
      "dobMonth": {
        required: true
      },
      "country": {
        required: true
      }
    },
    messages: {
      "firstName": {
        required: "Enter your first name"
      },
      "lastName": {
        required: "Enter your last name"
      },
      "dobMonth": {
        required: "Enter the month you were born"
      },
      "country": {
        required: "Country is required"
      }
    },
    invalidHandler: function(event, validator) {
      if (validator.errorList.length > 0) {
        $('.error-menu li').show();
      }
      validator.successList.forEach(function(element, index) {
        $('.error-menu li a[href="#' + $(element).prev().attr('for') + '"]').closest('li').hide();
      });
    }
    /*submitHandler: function (form) {
                 alert('valid');
                 return false;
                 }*/
  });
  $('#form-jsvalidate').validate().settings.ignore = ':not(select.selectpicker, select:visible, input:visible, textarea:visible)';
  $('input, select').on('input change', function() {
    if ($("#form-jsvalidate").valid()) {
      $('.error-menu li').hide();
    }
  });
  $('.btn-submit-val').on('click', function() {
    $("#form-jsvalidate").valid();
    return false;
  });
  $('.error-menu').show();
  $("#form-jsvalidate").valid();
});

body {
  margin: 10px;
}
.error-message-container {
  background: cornflowerblue;
}
.error-message-container ol li a label {
  display: inline;
  margin: 0;
  text-decoration: underline;
  font-weight: normal;
  color: pink;
}
label.error {
  color: red;
}
input.error,
select.error,
.input-validation-error button {
  border: 1px solid red !important;
}
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: auto !important;
}
ol.error-menu {
  display: none;
}
li {
  margin-left: 20px;
  list-style-type:decimal;
}
.hidethis {
  display: none;
}
.showthis {
  display: list-item;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.js"></script>
<form id="form-jsvalidate" action="/" method="post">
    <ol class="error-message-container error-menu">
        <li><a href="#firstName"><label class="error" for="firstName" generated="true"></label></a></li>
        <li><a href="#lastName"><label class="error" for="lastName" generated="true"></label></a>
        <li><a href="#dobMonth"><label class="error" for="dobMonth" generated="true"></label></a>
        <li><a href="#country"><label class="error" for="country" generated="true"></label></a>
    </ol>
    <div class="form-group">
        <label for="firstName" class="control-label">First Name</label>
        <label class="error" for="firstName" generated="true"></label>
        <input type="text" class="form-control" id="firstName" name="firstName" />
    </div>
    <div class="form-group">
        <label for="lastName" class="control-label">Last Name</label>
        <label class="error" for="lastName" generated="true"></label>
        <input type="text" class="form-control store" name="lastName" value="" />
    </div>
    <div class="form-group">
        <label class="error" for="dobMonth" generated="true"></label>
        <select name="dobMonth" id="dobMonth" class="required selectpicker">
            <option value="">Month</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
        </select>
    </div>
    <div class="form-group">
        <label class="error" for="country" generated="true"></label>
        <select name="country" id="country" class="required selectpicker">
            <option value="">Select Country</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
        </select>
    </div>
    <div class="form-group form-group-button-section">
        <a href="/" type="submit" class="btn-submit-val btn btn-primary icon-standard button-standard" onclick="save_page($('#formValidate *'));">Continue</a>
    </div>
</form>

不这样做:

    $('input, ul.dropdown-menu li, .form-inline').on('change', function() {
  if($('li a label').css('display') == 'none'){ 
    $('.error-menu li a label').closest('li').hide('slow'); 
  } else { 
    $('.error-menu li a label').closest('li').show('slow'); 
  }
});

这样做:

$('input').change(function() {
  var $liError = $('a[href="#' + $(this).attr('name') + '"]').closest('li');
  if($(this).is(':visible')){
    $liError.show('slow');
  }else{
    $liError.hide('slow');
  }
});

下拉菜单你正在使用selectpicker，他们有一个不同的onchange事件。

改变$('.error-menu li a label').closest('li').hide('slow');到$('.error-menu li a label').closest('li').remove('slow');它解决你的问题!

$('input, ul.dropdown-menu li, .form-inline').on( 'change', function() {
  if( $('li a label').css('display') == 'none'){ 
    $('.error-menu li a label').closest('li').remove('slow'); 
  } else { 
    $('.error-menu li a label').closest('li').show('slow'); 
  }
});