当您第一次访问 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');
}
});
最佳答案
每当您更改或修改输入或选择字段时，都可以向插件请求验证。如果结果是“表单有效”，您可以隐藏错误菜单。否则，您将以这种方式触发验证器的 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>关于javascript - 仅使目标 li 在字段更改时消失/重新出现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39882013/