Inputs (local options)

All the possible options that can be defined locally to each Form Elements (inputs)

###Debounce Debounce is the timeout delay after which the user stop typing, the validation will then come in play. By default Angular-Validation as a debounce of 1 second and so by default the user will not be annoyed by validation errors until he stops typing for a second. The number passed to the debounce is defined in millisecond (1000ms = 1sec).

This property can also be redefined in the Global Options.

######Directive

<!-- Debounce of 5sec -->
<input type="text" name="input1" ng-model="input1" debounce="5000" validation="integer|required" />

######Service

  // start by creating the service
  var myValidation = new validationService();

  // adding a validator and passing the debounce of 5sec
  myValidation.addValidator({ elmName: 'input2', debounce: 5000, rules: 'numeric_signed|required' });

###Friendly-Name Friendly name as the name suggest is to give more friendly input names, because a name of "input1" might not mean much to the user, a name of "First Name" is a much more friendly name to read and could also be used in the Validation Summary as well. ######Directive

<input name="input1" friendly-name="{{ FIRST_NAME | translate }}" ng-model="input1" validation="required" />

######Service

  // start by creating the service
  var myValidation = new validationService();

  // adding a validator and passing the friendlyName of 5sec
  // NOTE: in the Service, properties are declared as camelCase as every AngularJS
  myValidation.addValidator({ elmName: 'input2', friendlyName: $translate.instant('FIRST_NAME'), rules: 'required' });

###Validation-Error-To Angular-Validation create it's own after your input element, but in some cases you might want to define your own since in some cases, it could break some of the UI display. I encounter the problem myself when using Bootstrap on inputs with input-group, it has 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.

######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="validator1" validation-error-to="myErrorId" />
<input name="input1" validation="validator1" validation-error-to="#myErrorId" />
<span id="myErrorId" class="validation text-danger"></span>

<!-- or with a className -->
<input name="input1" validation="validator1" 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="validator1" />
<span class="validation-input1 validation text-danger"></span>

######Service

// 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'
});