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); } }
Comments
Post a Comment