How to use custom validation function with Bootstrap's Validation?

Question

Regarding to this answer my following code should work:

<form data-toggle="validator">
  <div class="form-group has-feedback">
    <label for="exampleInputText">Name</label>
    <input type="text" class="form-control" id="exampleInputText" placeholder="text" data-odd>
    <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
    <div class="help-block with-errors"></div>
</form>

<script type="text/javascript">
  $('form').validator({
    custom: {
      'odd': function($el) { return false }
    },
    errors: {
      'odd': 'error message'
    }
  })
</script>

But it does not work - why?

Answer 1

You should remove

data-toggle="validator"

from the form tag, and update the input with id exampleInputText as follows (i.e. adding ="odd" to data-odd):

data-odd="odd"

Example here: https://jsfiddle.net/mdt86/9r06waph/10/