poly-form-validation | A collection of angular directives for validation.

poy-form-validation directive

poly-form-validation

Stars : 10

Forks : 10

Created by Polyptychon

bower install polyptychon/poly-form-validation

Demo Download GitHub

Description

A collection of directives for combining angular and bootstrap validation.

Demo: http://polyptychon.github.io/poly-form-validation

Requirements

Install

You can install this package either with npm or with bower.

npm

npm install --save polyptychon/poly-form-validation

Add a stylesheet to your index.html head:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/node_modules/poly-form-validation/lib/css/poly-form-validation.css">

Add a <script> to your index.html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<script src="/node_modules/poly-form-validation/lib/js/poly-form-validation.min.js"></script>

Then add poly-form-validation as a dependency for your app:

angular.module('myApp', ['poly-form-validation']);

Note that this package is in CommonJS format, so you can require('poly-form-validation')

bower

bower install polyptychon/poly-form-validation

Add a stylesheet to your index.html head:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="/bower_components/poly-form-validation/lib/css/poly-form-validation.css">

Add a <script> to your index.html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<script src="/bower_components/poly-form-validation/lib/js/poly-form-validation.min.js"></script>

Then add poly-form-validation as a dependency for your app:

angular.module('myApp', ['poly-form-validation']);

Documentation

Directives quick guide

NameTypeDescription
formTabs
<form-tabs>
EUse it to organize controls inside tabs.
formTab
<form-tab tab-title="Validation">
EAllow you to add tabs to a form in combination with form-tabs as a parent element. If you have more than one tab you can navigate to the next tab only when all form controls in the current tab are valid.
formControl
<form-control>
EGroup a form control with other validation elements. Copies all ng classes from nested inputs with ng-model and allow you to display validation messages with css.
inputGroup
<input-group>
EUse it to replace bootstrap <div class="input-group"> http://getbootstrap.com/css/#forms-inline
inputGroupAddon
<input-group-addon>
EUse it to replace bootstrap <div class="input-group-addon"> http://getbootstrap.com/css/#forms-inline
validIcon
<valid-icon>
EUse it to replace bootstrap <span class="valid-icon glyphicon glyphicon-ok form-control-feedback"></span> http://getbootstrap.com/css/#forms-control-validation
loaderIcon
<loader-icon>
EUse it inside <form-control> to display a loader icon inside an input field.
errorMessage
<error-message>
EUse it inside <form-control> to display error messages. You must add a class with the same name of angular validation directives. <error-message class="ng-required">. Error message show only when input has class ng-dirty ng-invalid.
popover
<popover>message</popover>
EUse it to display bootstrap popover. http://getbootstrap.com/javascript/#popovers
uiValidate
<input ui-validate=" '$value==myForm.value'">
AUse it to validate input with expression. http://angular-ui.github.io/ui-utils/
remoteValidation
<input remote-validation= "remoteValidation.json">
AUse it to async validate input fields. In remote script you must return true if value is valid or error message
disableValidationWhenHidden
<div ng-show="false" disable-validation-when-hidden>
ADisable nested form controls from validation and submission when hidden with angular directives ng-show ng-hide ng-disabled

formTabs

Use it to organize controls into tabs.

Attributes
NameTypeDefaultDescription
select-form-tab-indexNumber0allow you to change selected tab
Example
<form name="ValidationForm">
  <form-tabs>
    <form-tab tab-title="Validation">
      <div class="row">
        <form-control class="col-md-6">
          <label for="validatePassword0">password</label>
          <input name="validatePassword" id="validatePassword0" ng-model="ValidationForm.validatePasswordValue" autocomplete="validatePassword" type="password" placeholder="password" value="test" ng-required="true" class="form-control">
          <valid-icon></valid-icon>
          <loader-icon></loader-icon>
          <error-message class="ng-required">Field is required</error-message>
        </form-control>
      </div>
    </form-tab>
  </form-tabs>
</form>

formTab

Allow you to add tabs to a form in combination with form-tabs as a parent element. If you have more than one tab you can navigate to the next tab only when all form controls in the current tab are valid.

Attributes
NameTypeDefaultDescription
tab-titleString'Title'Set the tab title label.
next-tab-button-labelString'Next'Set next button label.
show-next-buttonBooleantrueShow/hide next tab button.
directive-scopeStringundefinedGet directive controller in a variable
Directive scope methods and properties
NametypeDescription
isPaneInvalidpropertyReturn if tab is invalid.
selectNextPanemethodSelects next tab.
Example
<form name="ValidationForm">
  <form-tabs>
    <form-tab tab-title="Register">
      <div class="row">
        <form-control class="col-md-6">
          <label for="validatePassword0">password</label>
          <input name="validatePassword" id="validatePassword0" ng-model="ValidationForm.validatePasswordValue" autocomplete="validatePassword" type="password" placeholder="password" value="test" ng-required="true" class="form-control">
          <valid-icon></valid-icon>
          <loader-icon></loader-icon>
          <error-message class="ng-required">Field is required</error-message>
        </form-control>
      </div>
    </form-tab>
    <form-tab tab-title="User">
      <div class="row">
        <form-control class="col-md-6">
          <label for="uiValidate1">ui-validate</label>
          <input name="uiValidate" id="uiValidate1" ng-model="uiValidate1" autocomplete="uiValidate" type="password" placeholder="ui-validate" value="test" ui-validate="'$value==ValidationForm.validatePasswordValue'" ui-validate-watch="'ValidationForm.validatePasswordValue'" ng-required="true" class="form-control">
          <valid-icon></valid-icon>
          <loader-icon></loader-icon>
          <error-message class="ng-required">Field is required</error-message>
          <error-message class="ui-validate">Validation failed</error-message>
        </form-control>
      </div>
    </form-tab>
  </form-tabs>
</form>
Example with directive scope
<form name="ValidationForm">
  <form-tabs>
    <form-tab tab-title="Register" directive-scope="$formTab">
      <div class="row">
        <form-control class="col-md-6">
          <label for="validatePassword0">password</label>
          <input name="validatePassword" id="validatePassword0" ng-model="ValidationForm.validatePasswordValue" autocomplete="validatePassword" type="password" placeholder="password" value="test" ng-required="true" class="form-control">
          <valid-icon></valid-icon>
          <loader-icon></loader-icon>
          <error-message class="ng-required">Field is required</error-message>
        </form-control>
        <div class="col-md-12">
          <button class="btn btn-primary"
            ng-disabled="$formTab.isPaneInValid"
            ng-click="$formTab.selectNextPane()">Next</button>
        </div>
      </div>
    </form-tab>
    <form-tab tab-title="User">
      <div class="row">
        <form-control class="col-md-6">
          <label for="uiValidate1">ui-validate</label>
          <input name="uiValidate" id="uiValidate1" ng-model="uiValidate1" autocomplete="uiValidate" type="password" placeholder="ui-validate" value="test" ui-validate="'$value==ValidationForm.validatePasswordValue'" ui-validate-watch="'ValidationForm.validatePasswordValue'" ng-required="true" class="form-control">
          <valid-icon></valid-icon>
          <loader-icon></loader-icon>
          <error-message class="ng-required">Field is required</error-message>
          <error-message class="ui-validate">Validation failed</error-message>
        </form-control>
      </div>
    </form-tab>
  </form-tabs>
</form>

formControl

Group a form control with other validation elements. Copies all ng classes from nested inputs with ng-model and allow you to display validation messages with css.

Attributes
NameTypeDefaultDescription
typeString'form-group'Sets element class.
Example
<form name="ValidationForm">
  <div class="row">
    <form-control class="col-md-6">
      <label for="validatePassword0">password</label>
      <input name="validatePassword" id="validatePassword0" ng-model="ValidationForm.validatePasswordValue" autocomplete="validatePassword" type="password" placeholder="password" value="test" ng-required="true" class="form-control">
      <valid-icon></valid-icon>
      <loader-icon></loader-icon>
      <error-message class="ng-required">Field is required</error-message>
    </form-control>
  </div>
</form>

errorMessages

Use it inside <form-control> to display error messages. You must add a class with the same name of angular validation directives. <error-message class="ng-required">. Error message show only when input has class ng-dirty ng-invalid.

ClassesProvider
ng-requiredAngular
ng-minlengthAngular
ng-maxlengthAngular
ng-patternAngular
ng-emailAngular
ng-numberAngular
ng-urlAngular
ui-validateAngular-ui
remote-validationPolyptychon

You can add custom validation classes.

Example
.has-feedback.ng-dirty.ng-invalid-custom-validation > .custom-validation,
  display: block;
}

popover

Use it to display bootstrap popover. http://getbootstrap.com/javascript/#popovers

Attributes
NameTypeDefaultDescription
prevent-close-on-popover-clickBooleanfalsePrevents popover to close when clicked inside
titleString''Sets popover title.
animationBoolean'true'Apply a CSS fade transition to the popover
containerStringnullAppends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.
placementString'top'Sets popover title.
delayNumber0Delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: { "show": 500, "hide": 100 }
triggerString'focus'How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
viewportObject{selector: 'body', padding: 0}Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }
Example
<form name="ValidationForm">
  <div class="row">
    <form-control class="col-md-6">
      <label for="validatePassword0">password</label>
      <input name="validatePassword"
             id="validatePassword0"
             ng-model="ValidationForm.validatePasswordValue"
             autocomplete="validatePassword"
             type="password"
             placeholder="password"
             value="test"
             ng-required="true"
             class="form-control">
      <popover>Please type a password</popover>
      <valid-icon></valid-icon>
      <loader-icon></loader-icon>
      <error-message class="ng-required">Field is required</error-message>
    </form-control>
  </div>
</form>

remoteValidation

Use it to async validate input fields. In remote script you must return true if value is valid or error message. Validation triggers when other validation in input are valid and after user stops typing (500 milliseconds default value)

Attributes
NameTypeDefaultDescription
remote-validationString''A URL to validate input value
remote-validation-map-dataObject{}Mapping data from an object to url. See example bellow
remote-validation-quiet-millisNumber500How much time after user stops typing to trigger validation
remote-validation-data-typeString'json'JSON or JSONP
remote-validation-is-valid-pathString''In the returned JSON object we can specify the path to validation
remote-validation-is-valid-test-regxStringnullTest a regular expression against return value
remote-validation-error-message-pathString''In the returned JSON object we can specify the path to error message
Example
<form name="ValidationForm">
  <div class="row">
    <form-control class="col-md-6">
      <label for="remoteValidation11">remoteValidation</label>
      <input name="remoteValidation"
             id="remoteValidation11"
             ng-model="ValidationForm.remoteValidation11"
             autocomplete="remoteValidation"
             type="text"
             placeholder="remoteValidation"
             value="test"
             remote-validation="remoteValidation.json?value=:value"
             remote-validation-map-data="{ value:ValidationForm.remoteValidation11 }"
             ng-required="true"
             class="form-control">
      <valid-icon></valid-icon>
      <loader-icon></loader-icon>
      <error-message class="ng-required">Field is required</error-message>
      <error-message class="remote-validation">Remote Error</error-message>
    </form-control>
  </div>
</form>
Example Regx
<form name="ValidationForm">
  <div class="row">
    <form-control class="col-md-6">
      <label for="remoteValidation11">remoteValidation</label>
      <input name="remoteValidation"
             id="remoteValidation11"
             class="form-control"
             type="text"
             ng-model="ValidationForm.remoteValidation11"
             ng-required="true"
             remote-validation="http://isemail.info/jsonp=JSON_CALLBACK/:value"
             remote-validation-map-data="{value:ValidationForm.remoteValidation11}"
             remote-validation-data-type="jsonp"
             remote-validation-error-message-path="diagnosis"
             remote-validation-is-valid-path="diagnosis"
             remote-validation-is-valid-test-regx="/Address is valid/gi">
      <valid-icon></valid-icon>
      <loader-icon></loader-icon>
      <error-message class="ng-required">Field is required</error-message>
      <error-message class="remote-validation">Remote Error</error-message>
    </form-control>
  </div>
</form>
{
  "address":"[email protected]",
  "diagnosis":"Couldn't find an MX record for this domain but an A-record does exist",
  "constant":"ISEMAIL_DNSWARN_NO_MX_RECORD",
  "category":"Address is valid but a DNS check was not successful",
  "categoryconstant":"ISEMAIL_DNSWARN",
  "smtp":"250 2.1.5 ok",
  "numeric":5,
  "reference":""
}

Javscript

Javascript plugin

Angular-js