Bootstrap Input Groups Wrapping

DisplayErrorTo

Well let's face it, having the <span> for error display right after the element to be validated is not always ideal and I encounter the problem myself when using Bootstrap on inputs with input-group, it had so much wrapping around the input that the next available element might not be the one we want. In these special occasions, we will add a <span> or a <div> for displaying the possible error and give the this element an id="someId" or a class="className" and then reference it inside our input. We could actually move the error element anywhere we want with this method, just don't forget to name it with an id or a className and call the validation-error-to attribute. This attribute could be called in 3 different ways: with '.' (element error className) or with/without '#' (element error id) We could even do a validation summary with this...just saying hehe.

Use $scope.$validationOptions = { hideErrorUnderInputs: true }; to hide original error message.

Directive

<div class="form-group" ng-hide="trsn.isDividend">
    <label for="input1">Search Input with BS input-groups</label>
    <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" name="input1" ng-model="form1.input1"
          validation="min_len:2|max_len:10|alpha_dash_spaces|required"
          validation-error-to="myErrorId" />
        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
    </div>
    <span id="myErrorId" class="validation text-danger"></span>
</div>

<!-- 3 ways of writting it, 2 ways for ID, 1 way for className -->
<!-- with an ID -->
<input name="input1" validation="required" validation-error-to="myErrorId" />
<input name="input1" validation="required" validation-error-to="#myErrorId" />
<span id="myErrorId" class="validation text-danger"></span>

<!-- or with a className -->
<input name="input1" validation="required" validation-error-to=".errorClassName" />
<span class="errorClassName validation text-danger"></span>

<!-- or even better, since this directive use a pattern of className named as "validation-yourInputName" -->
<!-- you could create only the `<span>` and ommit/skip the `validation-error-to=""` attribute within the input -->
<input name="input1" validation="required" />
<span class="validation-input1 validation text-danger"></span>

Service

// inject the ValidationService inside your Controller
myApp.controller('Ctrl', function ($scope, ValidationService) {
  // start by creating the service
  var myValidation = new ValidationService();

  // when defining your validators, you can define the validationErrorTo property
  // same as html attribute validation-error-to, but camelCase: validationErrorTo
  myValidation.addValidator({
    elmName: 'input2',
    validationErrorTo: '.errorClassName' // for a class
  })
  .addValidator({
    elmName: 'input3',
    validationErrorTo: 'myErrorId' // for an ID or use '#myErrorId'
  });
});