<form action="#" class="form-horizontal ws-validate"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email*</label> <!-- place errorbox between label and field --> <div class="ws-errorbox" hidden=""></div> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required /> </div> </div> <!-- associate errorbox with a fieldwrapper using data-errorbox --> <div class="form-group" data-errorbox="passerror"> <label for="inputPassword3" class="col-sm-2 control-label">Password*</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required /> </div> </div> <div class="form-group"> <div class="col-xs-3"> <button type="submit" class="btn btn-primary">submit</button> </div> <div class="ws-errorbox col-xs-9" id="passerror" hidden=""></div> </div> </form>
(function () { webshims.setOptions('forms', { lazyCustomMessages: true, iVal: { sel: '.ws-validate', handleBubble: 'hide', // hide error bubble //add bootstrap specific classes errorMessageClass: 'help-block', successWrapperClass: 'has-success', errorWrapperClass: 'has-error', //add config to find right wrapper fieldWrapper: '.form-group' } }); //load forms polyfill + iVal feature webshims.polyfill('forms'); })();
body { margin: 10px; padding: 10px; } .form-group > [class*="col-"] + .ws-errorbox { padding: 0 15px; } [class*="col-"].ws-errorbox { clear: none; }