Sandbox: JavaScript

Plugin dependency

Note: Be sure to include thanx-components/form-validator.less so that error states are styled correctly.

Adds a form validator that shows its messages in Bootstrap Tips.

Basic Usage

Works just like regular form validator.

<form id="foo" data-behavior="FormValidator.BS.Tips" class="form-horizontal">

  <div class="form-group">
    <label class="col-lg-5 control-label">An example w/ an input group</label>
    <div class="input-group input-group-rounded col-lg-5">
      <input type="search" class="form-control" name="email" placeholder="validates email"
        data-validators="required validate-email" data-tip-offset="'x': 40, 'y': -2"
        value="">
        <span class="input-group-btn">
            <button type="submit" class="btn btn-default"><span class="fui-search"></span></button>
        </span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-5 control-label">this cannot be empty</label>
    <div class="col-lg-5"><input name="a" data-validators="required" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be an integer (-1,0,1,2,3, etc)</label>
    <div class="col-lg-5"><input name="b" data-validators="required validate-integer" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be numeric (0, 1.3, -5.2, 10, etc) </label>
    <div class="col-lg-5"><input name="c" data-validators="required validate-numeric" class="form-control"></div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-5 col-lg-5">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Custom validation messages, custom tip positioning per field

Each form field can have a value for data-tip-location and data-tip-offset. Like the other Form.Validator classes, you can also override the default error messages with the title of the input if you enable the useTitles option.

<form id="foo" data-behavior="FormValidator.BS.Tips" data-formvalidator-bs-tips-options="
  'useTitles': true
" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-5 control-label">the tip below the input using <code>data-tip-location</code></label>
    <div class="col-lg-5"><input name="a" data-validators="required" class="form-control" data-tip-location="below"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">the tip offset using <code>data-tip-offset</code> - can be an integer or an object with x/y values. The braces are optoinal (see source).</label>
    <div class="col-lg-5"><input name="b" data-validators="required validate-integer" class="form-control" data-tip-offset="'x':100, 'y':10"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">Override the validation message with the <code>attribute</code>.</label>
    <div class="col-lg-5"><input name="c" data-validators="required" class="form-control" title="I feel so empty this way."></div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-5 col-lg-5">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Behavior Options

These are only the options that FormValidator.BS.Tips ads in addition to those provided by Behavior.FormValidator.Inline.

Name type default description
tooltipOptions object { location: 'right' } Options passed to Bootstrap.Tooltip. Note that you can specify a value for tooltipOptions.inject.target using a selector relative to the element with the behavior if you want to control where these end up in the DOM (useful in situations where the form hides and shows in, say, a tabbed UI.