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


when validate multi-select field using jquery validation plugin, error messages getting displayed above multi-select. how can display under 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 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 jsfiddle.

you can change errorplacement function in $('#frm').validate({...}) following. if element has class multiselect add error message after .btn-group next it, otherwise directly after element.

errorplacement: function(error, element) {     if (element.hasclass('multiselect')) {         error.insertafter(element.next('.btn-group'));     } else {         error.insertafter(element);     } } 

demo


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -