Angular-Form-Validations

Custom Validations for Angular Forms

Install

Install with npm

$ npm install angular-form-validations --save

Install with bower

$ bower install angular-form-validations --save

Usage

Include in the application

<script src = 'bower_components/angular-form-validations/dist/angular-form-validations.js'></script>

in app.js

var aap = angular.module('app',['angular-form-validations']);

var callback = {
    success:function(scope,element,attribute,errorObj){
        //handle the success callback in case the field has no errors
    },
    failure:function(scope,element,attribute,errorObj){
        //handle the error callback in case the field has error(s)
    }
}

app.config(['$angularFormValidationProvider',($angularFormValidationProvider)=>{
    $angularFormValidationProvider.registerErrorCallbacks(callback);
    $angularFormValidationProvider.registerErrorEvents(['keyup']);
}]);

in template.html

 <form name='testForm' class="form-horizontal" ng-cloak role="form" form-validation novalidate>
            <div class="panel panel-default">
                <div class="panel panel-heading">Passwords:</div>
                <div class="panel-body">
                    <div class="col-xs-8">
                        <label>Password:</label>
                        <input type='password' class="form-control" name='password' minlength="6"
                               element-validation ng-model='password' required/>
                        <label>Confirm Password: </label>
                        <input type='password' class="form-control" name='confirmPassword' vtype='equal'
                               match="password"
                               element-validation ng-model='confirmPassword' required/>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel panel-heading">Matching:</div>
                <div class="panel-body">
                    <div class="col-xs-8">
                        <label>Sample Number:</label>
                        <input type='number' class="form-control" name='field1'
                               element-validation ng-model='field1' required/>
                        <label>Should be Equal to Sample Number: </label>
                        <input type='number' class="form-control" name='field2' vtype='equal'
                               match="field1"
                               element-validation ng-model='field2' required/>
                        <label>Should be Greater than Sample Number: </label>
                        <input type='number' class="form-control" name='field3' vtype='greater'
                               match="field1"
                               element-validation ng-model='field3' required/>
                        <label>Should be Less than Sample Number: </label>
                        <input type='number' class="form-control" name='field4' vtype='less'
                               match="field1"
                               element-validation ng-model='field4' required/>
                        <label>Should be LessThanEqual than Sample Number: </label>
                        <input type='number' class="form-control" name='field5' vtype='lessThanEqual'
                               match="field1"
                               element-validation ng-model='field5' required/>
                        <label>Should be GreaterThanEqual than Sample Number: </label>
                        <input type='number' class="form-control" name='field6' vtype='greaterThanEqual'
                               match="field1"
                               element-validation ng-model='field6' required/>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel panel-heading">Strings:</div>

                <div class="panel-body">
                    <div class="col-xs-8">

                        <label>Text: </label>
                        <input type='text' class="form-control" name='text' element-validation ng-model='text'
                               required/>
                        <label>UserName: </label>
                        <input type='text' class="form-control" name='username' element-validation
                               vtype='username' ng-model='username'
                               required/>
                        <label>Name(Characters Only): </label>
                        <input type='text' class="form-control" name='name' element-validation vtype='chars'
                               ng-model='name'
                               required/>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel panel-heading">Numbers:</div>
                <div class="panel-body">
                    <div class="col-xs-8">

                        <label>Positive Number:</label>
                        <input type='number' class="form-control" name='posNum' vtype='positive'
                               element-validation ng-model='posNum' required/>
                        <label>Negative Number:</label>
                        <input type='number' class="form-control" name='negNum' vtype='negative'
                               element-validation ng-model='negNum' required/>
                        <label>Non-Negative Number:</label>
                        <input type='number' class="form-control" name='nonNegative' vtype='nneg'
                               element-validation ng-model='nonNegNum' required/>
                        <label>Non-Positive Number:</label>
                        <input type='number' class="form-control" name='nonPositive' vtype='npos'
                               element-validation ng-model='nonPosNum' required/>
                        <label>Range Number:</label>
                        <p>min: {{minValue}}</p>
                        <p>max: {{maxValue}}</p>
                        <input type='number' class="form-control" name='range' vtype='range'
                               element-validation
                               ng-model='rangeNum' min-val="minValue" max-val="maxValue" required/>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel panel-heading">Date:</div>
                <div class="panel-body">
                    <div class="col-xs-8">
                        <label>Specified Date: </label>
                        <input type='date' class="form-control" name='specifiedDate'  element-validation
                               ng-model='specifiedDate'/>
                        <label>Should be Later than Yesterday's Date:</label>
                        <input type='date' class="form-control" name='date' vtype='current' element-validation
                               ng-model='date' required/>
                        <label>Should be Later than Today's Date:</label>
                        <input type='date' class="form-control" name='tomorrowDate' vtype='next' element-validation
                               ng-model='tomorrowDate' required/>
                        <label>Should be later than Specific dDate:</label>
                        <input type='date' class="form-control" name='specificDate' vtype='specifiedDate' date="specifiedDate" element-validation
                               ng-model='specificDate' required/>
                        </div>
                    </div>

            </div>
            <div class="panel panel-default">
                <div class="panel panel-heading">Async:</div>
                <div class="panel-body">
                    <div class="col-xs-8">
                        <label>Async Validations:</label>
                        <input type='email' class="form-control" name='email' vtype='check' async="true"
                               element-validation async-callback='validateEmail(value)' ng-model='email' required/>
                    </div>
                </div>
            </div>
            <button type="submit" ng-click="doSubmit()">Button</button>

        </form>

API

FormValidationProvider

.registerErrorCallbacks(callbackObject)

Registers the callback object. When the field is re-validated one of the callbacks get called depending upon if the field is invalidated or validated.

The callback object has two fields :

 var callback =  {
     success:function(scope,element,attribute,errorObj){
         //handle the success callback in case the field has no errors
     },
     failure:function(scope,element,attribute,errorObj){
         //handle the error callback in case the field has error(s)
     }
 }

The callback object needs to be provided in the config state of the module

.registerErrorEvents(events)

Registers the jquery events on which the callbacks need to be triggered. Events can be passed as a single string jquery event name or an array of such strings. If nothing is passed then it assumes blur as default event.

.addValidationRules(validationObject)

There are few existing rules present. However, if you want to add few more new rules or override the existing ones, you can pass a configuration in a particular format.

var validationObject =  {
  type1:{
    vtype1: regexObject,
    vtype2:function(val,scope,attr){
               
    }
  }

}

where type1 is one of the input types and vtype1 is defined as an attribute in the input element.

Directives

To use the form validation, we need to use FormValidationDirective on the form elements and ElementValidationDirective Usage of both the directives are required

FormValidationDirective

<form name='testForm' ng-cloak role="form" form-validation-directive novalidate>

ElementValidationDirective

  <input type='password' class="form-control" name='confirmPassword' vtype='confirm' match="password"
                                 element-validation-directive ng-model='confirmPassword' required/>

Existing Validations

Numbers

Validation for numeric fields type ='number' is mandatory

1. vtype = 'positive' - For fields requiring positive numbers only
2. vtype = 'negative' - For fields requiring negative numbers only
3. vtype = 'nneg' - For fields requiring non-negative numbers only
4. vtype = 'npos' - For fields requiring non-positive numbers only
5. vtype = 'range' - For fields requiring a range of numbers only It requires min-val='min' and max-val='max' data binding for giving range for validations. Unordered sub-list

Strings

Validation for numeric fields type ='text' is mandatory

1. vtype = 'chars' - For fields requiring characters only
2. vtype = 'username' - For fields requiring alphanumeric, . and .

Date

Validation for date fields type ='date' is mandatory

1. vtype = 'current' - For model date value to be later than yesterday's date
2. vtype = 'next' - For model date value to be later than today's date
3. vtype = 'specifiedDate' - For model date value to be later than specified date

Telephone

Validation for Telephone fields Either type ='tel' or type = 'text' and vtype='tel' is mandatory

Formats supported are

 555-555-5555
 (555)555-5555
 (555) 555-5555
 555 555 5555
 5555555555
 1 555 555 5555 

Match

Validations in one field with regards to the data in other fields. More so like used in confirm password

1. vtype = 'equal' - For fields requiring match with another field It requires match='otherModelValue' data binding to validate the field.
2. vtype = 'greater' - For fields requiring values to be greater than another field It requires match='otherModelValue' data binding to validate the field.
3. vtype = 'less' - For fields requiring values to be less than another field It requires match='otherModelValue' data binding to validate the field.
4. vtype = 'greaterThanEqual' - For fields requiring values to be greater than or equal to another field It requires match='otherModelValue' data binding to validate the field.
5. vtype = 'lessThanEqual' - For fields requiring values to be less than or equal to another field It requires match='otherModelValue' data binding to validate the field.

Async

Asynchronous Validations for fields. For example, if one needs to check if email exists in the database

1. async-callback='callbackForAPIRequests(value) : It is a mandatory attribute to be passed in the element. The method callbackForAPIRequests should be defined in the controller. vtype = '*' - Not a mandatory field in async validations but advisable if you want to determine the element/errorType later on.

Example

Download the .zip file,run a web server on the root folder of the library and hit the following in the web browser. http://localhost:8000/example