Twitter Bootstrap and jQuery Validation Plugin - use class="control-group error" -

i've created form using twitter bootstrap framework , have integrated jquery validation plugin. have 1 form series of yes/no questions radio buttons validate ensure each question not empty - working well.

i leverage bootstrap class="control-group error" make error text appear in red stands out user - "this field required" text in black , it's hard locate.

there's example of how error text appear here:

http://twitter.github.io/bootstrap/base-css.html#forms

at end of section under "validation states". here's specific example shows red message after input field (i want error appear after have clicked submit button):

<div class="control-group error">   <label class="control-label" for="inputerror">input error</label>   <div class="controls">     <input type="text" id="inputerror">     <span class="help-inline">please correct error</span>   </div> </div> 

here's form showing 1 question:

<form class="form-horizontal" method="post" id="inputform">       <input type="hidden" name="recid" value="1">        <table class="table table-condensed table-hover table-bordered">        <h2>input form</h2>            <tr>           <td>question 1.</td>           <td>               <div class="controls">                   <label class="radio inline">           <input type="radio" name="q1" value="yes" required>yes          </label>                   <label class="radio inline">           <input type="radio" name="q1" value="no" required>no        </label>                   <label for="q1" class="error"></label>         </div>           </td>           <td>please answer yes or no</td>           </tr>        </table>        </div>          <div class="control-group">             <div class="controls">               <button type="submit" class="btn btn-primary">continue</button>               <button type="reset" class="btn">reset</button>             </div>         </div>        </form> 

i can't work out how combine example form if submit form , haven't answered question alert appears in red.

i've setup jsfiddle here shows action if helps.

use errorclass option set jquery validate plugin desired class errors. apply both .control-group , .error classes upon validation error...

$(document).ready(function () {      // initialize plugin      $("#inputform").validate({           errorclass: "control-group error"      }); }); 

http://jsfiddle.net/f28pf/1/

see documentation plugin options: http://jqueryvalidation.org/validate

---

edit:

as pointed out, default behavior puts errorclass on message , input element.

if need toggle error/valid classes on else, leverage highlight , unhighlight callback functions.

$(document).ready(function () {     // initialize plugin     $("#inputform").validate({         errorclass: "control-group error",         highlight: function (element, errorclass, validclass) {             $(element).closest(".control-group").addclass(errorclass).removeclass(validclass);         },         unhighlight: function (element, errorclass, validclass) {             $(element).closest(".control-group").addclass(validclass).removeclass(errorclass);         }     }); });