0

当我使用 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。

4

3 回答 3

2

您可以按以下方式更改errorPlacement功能$('#frm').validate({...})。如果element有该类，则在其旁边multiselect添加错误消息，否则直接在元素之后。.btn-group

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

演示

于 2016-02-29T18:25:16.837 回答
1 
errorPlacement: function( label, element ) {
    if( element.attr( "name" ) === "input_control_name") {
        element.parent().append( label ); 
    } else {
        label.insertAfter( element );
    }
}

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

于 2020-05-07T12:45:41.060 回答
0

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

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

小提琴

于 2016-02-29T18:43:50.060 回答