Question

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

如果您输入名字字段，相应的“1.输入您的名字”应该消失（当名字字段为空时应该重新出现）。页面上的其他有效字段应该执行相同的操作 - 如果无效，则应显示li项目通知。当字段输入时，通知（和数字）应该消失。

但是当一个字段受到影响时，整个列表就会消失。是什么造成的？如何修改我的jQuery以仅列出列表中的单个对应项（和数字）与整个列表？

（显示：无/显示：错误标签上的内联由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'); 
  }
});

小提琴：https://jsfiddle.net/DTcHh/25922/

Answer 1

每当您更改或修改输入或选择字段时，都可以向插件请求验证。如果结果为“表单有效”，则可以隐藏错误菜单。否则，以这种方式触发验证器的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>

Answer 2

而不是这样做：

    $('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事件。

Answer 3

将$('.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'); 
  }
});

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

3 个答案: