在多选下方而不是在其上方显示验证错误消息答案

【问题标题】：Display validation error messages below the multi-select instead of above it在多选下方而不是在其上方显示验证错误消息
【发布时间】：2015-06-19 19:35:58
【问题描述】：

当我使用 jQuery 验证插件验证多选字段时，错误消息显示在多选上方。如何让它在多选下显示？

$('.multiselect').multiselect({
  onChange: function(element, checked) {
    $('.multiselect').valid();
  },
  buttonWidth: '100%',
  numberDisplayed: 6,
  buttonContainer: '<div class="btn-group ng-multiple-bs-select" />',
  buttonText: function(options) {
    if (options.length === 0) {
      return 'choose';
    } else {
      var selected = '';
      options.each(function() {
        selected += $(this).text() + ', ';
      });
      return selected.substr(0, selected.length - 2);
    }
  },
});


$('#frm').validate({
  rules: {
    kimliktipi: "required",
    kimlikserino: "required",
    cinsiyet: "required"
  },
  ignore: ':hidden:not(".multiselect")',

  highlight: function(element) {
    $(element).closest('.form-group').addClass('has-error');
  },
  unhighlight: function(element) {
    $(element).closest('.form-group').removeClass('has-error');
  },
  errorElement: 'span',
  errorClass: 'help-block small',
  errorPlacement: function(error, element) {
    if (element.parent('.input-group').length) {
      error.insertAfter(element.parent());
    } else {
      error.insertAfter(element); // ng-multiple-bs-select
    }
  },
  submitHandler: function() {
    alert('valid form');
    return false;
  }
});

<!-- External Resources from the Fiddle -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<link href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

<!-- End of External Resources -->

<form method="post" name="frm" id="frm" role="form">
  <div class="row">
    <div class="col-xs-12 col-md-4">
      <div class="form-group">
        <label class="control-label" for="kimliktipi">Kimlik Tipi</label>
        <select name="kimliktipi" id="kimliktipi" class="form-control multiselect" size="2">
          <option value="1">Kimlik</option>
          <option value="2">Pasaport</option>
        </select>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="form-group">
        <label class="control-label" for="kimlikserino">Kimlik Seri ve No</label>
        <input name="kimlikserino" type="text" class="form-control col-md-1" id="kimlikserino" placeholder="A12-123456" value="" />
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="form-group">
        <label class="control-label" for="cinsiyet">Cinsiyet</label>
        <select name="cinsiyet" id="cinsiyet" class="form-control multiselect" size="2">
          <option value="k">Kadın</option>
          <option value="e">Erkek</option>
        </select>
      </div>
    </div>
  </div>
  <button name="kaydet" type="submit" class="btn btn-default btn-lg center-block" value="kaydet">SAVE</button>
</form>

这是JSFiddle。

【问题讨论】：

我已将您小提琴中的代码添加到问题中，因为问题中应该始终包含代码。您可以使用 StackSnippet 功能创建一个演示，就像我在这里所做的那样。我还改写了标题以更好地解释您的问题。
几个月前我解决了这个问题：jsfiddle。无论如何，谢谢你们（（-;

标签： jquery twitter-bootstrap validation bootstrap-multiselect

【解决方案1】：

您可以更改$('#frm').validate({...}) 中的errorPlacement 函数，如下所示。如果element 具有类multiselect，则在其旁边的.btn-group 之后添加错误消息，否则直接在元素之后。

errorPlacement: function(error, element) {
    if (element.hasClass('multiselect')) {
        error.insertAfter(element.next('.btn-group'));
    } else {
        error.insertAfter(element);
    }
}

DEMO

【讨论】：

【解决方案2】：

errorPlacement: function( label, element ) {
    if( element.attr( "name" ) === "input_control_name") {
        element.parent().append( label ); 
    } else {
        label.insertAfter( element );
    }
}

代替“input_control_name”输入您在html中定义的输入字段名称值

【讨论】：

【解决方案3】：

只需更改用于插入显示消息的 span 的方法。

insertAfter 方法（Fiddle 中的第 41 和 43 行）一个接一个地插入一个元素，而不是使用这个：insertBefore 并且跨度将插入到您的元素之前。

Fiddle

【讨论】：