Display validation error messages below the multi-select instead of above it

Question

When I validate a multi-select field using jQuery validation plugin, the error messages are getting displayed above the multi-select. How can I get it to display under the multi-select?

$('.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>

Here is a JSFiddle.

Answer 1

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

in place of "input_control_name" enter the input field name value that you have defined in you html

Answer 2

You can change errorPlacement function in $('#frm').validate({...}) like following. If element has the class multiselect then add error message after the .btn-group next to it, otherwise directly after the element.

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

DEMO

Answer 3

just change the method employed to insert the span displaying the message.

The method insertAfter (line 41 & 43 in the Fiddle) inserts an element after another, instead use this one : insertBefore and the span will be inserted before your element.

Fiddle