javascript - 仅使目标 li 在字段更改时消失/重新出现？

Question

当您第一次访问 fiddle 并点击“继续”时，顶部会出现一个列表，其中包含收集的验证错误消息。

如果您在“名字”字段中键入内容，相应的“1. 输入您的名字”应该会消失(并且在“名字”字段为空时会重新出现)。页面上的其他有效字段应该发生相同的操作 - 当无效时，应该出现 li 项目通知。当字段有输入时，通知(和数字)应该消失。

但是当一个字段受到影响时，整个列表就会消失。是什么原因造成的？我将如何修改我的 jQuery 以仅针对列表中的单个对应项目(和数字)而不是整个列表？

(错误标签上的 display:none/display: inline 由 jQuery validation 生成)

<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>

$('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, ul.dropdown-menu li, .form-inline').on('change', function() {
   var labelCheck = $('.error-menu li a label');
  if($(labelCheck).css('display') == 'none'){ 
    $(this).closest('li').hide('slow'); 
  } else { 
    $(this).closest('li').show('slow'); 
  }
});

fiddle :https://jsfiddle.net/DTcHh/25922/

Answer 1

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

因此，您可以将所有内容简化为该函数:

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

并且，在 $("#form-jsvalidate").validate({ 你需要添加:

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>