(function () { webshim.setOptions('forms', { lazyCustomMessages: true, iVal: { //add config to find right wrapper fieldWrapper: '.form-group', //add bootstrap specific classes errorMessageClass: 'help-block', successWrapperClass: 'has-success', errorWrapperClass: 'has-error', //general iVal cfg sel: '.ws-validate', handleBubble: 'hide' // hide error bubble } }); //load forms polyfill + iVal feature webshim.polyfill('forms'); })();
<form action="#" class="form-horizontal ws-validate"> <div class="form-group"> <fieldset class="col-sm-10"> <legend>telephone group</legend> <div class="row"> <div class="col-xs-4"> <input type="tel" class="form-control" title="Telephone prefix. Allows digits, + and space signs. At least 2. characters." pattern="[\+\s0-9]{2,6}" required="" /> </div> <div class="col-xs-8"> <input type="tel" class="form-control" title="Telephone number. Allows at least 3 characters. Only digits and space signs are allowed" pattern="[\+\s0-9]{3,9}" required="" /> </div> </div> </fieldset> </div> <div class="form-group"> <fieldset class="col-sm-10"> <legend>radio group</legend> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" required="" />Option one is this and that—be sure to include why it's great</label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" />Option two can be something else and selecting it will deselect option one</label> </div> </fieldset> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email*</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required /> </div> </div> <div class="form-group"> <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-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox" />Remember me</label> </div> </div> </div> <div class="form-group"> <div class="col-sm-10"> <button type="submit" class="btn btn-primary">submit</button> </div> </div> </form>
body { margin: 10px; padding: 10px; } .form-group >[class*="col-"] + .ws-errorbox { padding: 0 15px; } legend { margin: 3px 0 10px; }