Description

A collection of directives for combining angular and bootstrap validation.

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

Requirements

• AngularJS
• JQuery
• Bootstrap

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

formTabs

Use it to organize controls into tabs.

Attributes

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

Directive scope methods and properties

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

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.

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

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

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":""
}