javascript - bootstrap jQuery validate plugin.. error placement issue -
so have implemented jquery validation plugin code shown in code below, have issue in displaying error code after options. @ minute being placed inside first button option. can change error placement code in javascript error placed after radio buttons each group please.
here php file containing form
<form class="form-horizontal" id="form" action="form.php" method="post"> <div class="form-group"> <label class="col-xs-3 control-label">gender</label> <div class="col-xs-9"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="gender" value="right" /> male </label> <label class="btn btn-default"> <input type="radio" name="gender" value="left" /> female </label> </div> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">height</label> <div class="col-xs-9"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="height" value="tall" /> tall </label> <label class="btn btn-default"> <input type="radio" name="height" value="small" /> small </label> </div> </div> </div> <div class="form-group"> <label class="col-xs-3 control-label">scale</label> <div class="col-xs-9"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="scale" value="1" /> 1 </label> <label class="btn btn-default"> <input type="radio" name="scale" value="2" /> 2 </label> <label class="btn btn-default"> <input type="radio" name="scale" value="3" /> 3 </label> <label class="btn btn-default"> <input type="radio" name="scale" value="4" /> 4 </label> <label class="btn btn-default"> <input type="radio" name="scale" value="5" /> 5 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-2 col-sm-offset-4"> <button type="submit" class="btn btn-danger">submit</button> </div> </div> </form> and here validate javascript code:
<script type="text/javascript"> $("#form").validate({ rules: { gender: { required: true }, height: { required: true }, scale: { required: true } }, 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', errorplacement: function(error, element) { if(element.parent('.form-group').length) { error.insertafter(element.parent()); } else { error.insertafter(element); } }, submithandler: function(form) { form.submit(); } }); 
i tried using bootstrap v3.3.4, jquery v2.1.4 , validate v1.13.1 , able following errorplacement syntax work based on how html structured:
errorplacement: function(error, element) { if (element.is(":radio")) { error.insertafter(element.closest("div")); } else { error.insertafter(element); } } hope helps cause.
Comments
Post a Comment