Angular form validator

Angular form validator is an easy to use, highly customizable front-end validation framework. It can be used to show real-time validation status in form controls. It uses bootstrap styles to provide visual indication of validity of each control addition to a customizable error message. Further it supports overriding the styles with custom implementations.

How to use the library with Bootstrap styles

  • Include the ngFormValidator.x.x.x.x.js
  • Include bootsrap.css or bootsrap.min.css
  • Add ngFormValidator as an angular module dependency
 

All Validators.

Have a look at all the possibilities with the Angular Form Validator below.

Type
Validated Field(s)
Enabled
Message
Parameters
Required
 
String
Number
Pattern
Email
Url
Equal To
Custom

Validate required field.

 
                            
<form name="introform" ng-controller="intro">
    <!--you can use
        <div class="form-group" validator="required">
        if you don't want to override the validation message-->
    <div class="form-group" validator="required['Field is required']">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="model.requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

                        
                            
(function() {
	angular.module('validatorApp').controller('intro',['$scope',function($scope) {
		$scope.model = { requiredField : '' };
	}]);
})();

                        
                        (function() {
var app = angular.module('validatorApp', ['ngFormValidator']);
})();

Validate using variables.

Validation can be enabled or disabled using scope variables, by simply using a variable instead of fixed value.

 
                            
<form name="introVariableform" ng-controller="introVariable">
    <div class="form-group">
        <label for="requiredField">Enable validation</label>
        <input type="checkbox" class="checkbox" ng-model="model.enableValidation">
    </div>
    <div class="form-group">
        <label for="requiredField">Validation Message</label>
        <input type="text" class="form-control" ng-model="model.validationMessage">
    </div>
    <div class="form-group" validator="required[model.enableValidation,model.validationMessage]">
        <label for="requiredField">Required Field</label>
        <input type="text" class="form-control" id="requiredField" name="requiredField"
               placeholder="Required Field" ng-model="model.requiredField">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introVariableform.$valid">Submit</button>
</form>

                        
                            
(function() {
    angular.module('validatorApp').controller('introVariable', ['$scope', function ($scope) {
        $scope.model = { requiredField: '', enableValidation: true, validationMessage : 'Test Message' };
	}]);
})();

Validate string length.

 
                            
<form name="introform" ng-controller="intro">
    <!--you can use
        <div class="form-group" validator="string[2]">
        or <div class="form-group" validator="string[2,,should be more than 2 characters]">
        if you want only to validate minimum length-->
    <!--also you can use
        <div class="form-group" validator="string[,3]">
        or <div class="form-group" validator="string[,3,should be less than 3 characters]">
        if you want only to validate max length-->
    <div class="form-group" validator="string[2,3]">
        <label for="field2To3">2 to 3 Length Field</label>
        <input type="text" class="form-control" id="field2To3" name="field2To3"
               placeholder="Enter a text" ng-model="model.field2To3">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

                        
                            
(function () {
    angular.module('validatorApp').controller('stringLength', ['$scope', function ($scope) {
        $scope.model = { field2To3: '' };
    }]);
})();

Validate number range.

 
                            
<form name="introform" ng-controller="numbers">
    <div class="form-group" validator="number[200,300]">
        <label for="field2To3">Number between 200 and 300</label>
        <input type="text" class="form-control" id="field2To3" name="field200To300"
               placeholder="Enter a Number" ng-model="model.field200To300">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

                        
                            
(function () {
    angular.module('validatorApp').controller('numbers', ['$scope', function ($scope) {
        $scope.model = { field200To300: '' };
    }]);
})();

Validate pattern.

                            

                        
                            
(function () {
    angular.module('validatorApp').controller('pattern', ['$scope', function ($scope) {
        $scope.model = { patternField: '' };
    }]);
})();

Validate email.

 
                            

                        
                            
(function () {
    angular.module('validatorApp').controller('email', ['$scope', function ($scope) {
        $scope.model = { emailField: '' };
    }]);
})();

Validate url.

                            

                        
                            
(function () {
    angular.module('validatorApp').controller('url', ['$scope', function ($scope) {
        $scope.model = { urlField: '' };
    }]);
})();

Confirm two fields are the same.

 
                            
<form name="introform" ng-controller="equalTo">
    <div class="form-group">
        <label for="emailField">Email</label>
        <input type="text" class="form-control" id="urlField" name="emailField"
               placeholder="Enter an email address" ng-model="model.email">
    </div>
    <div class="form-group" validator="equalTo['emailField']">
        <label for="confirmEmailField">Confirm Email</label>
        <input type="text" class="form-control" id="urlField" name="confirmEmailField"
               placeholder="Enter a Url" ng-model="model.confirmEmail">
    </div>
    <button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>

                        
                            
(function () {
    angular.module('validatorApp').controller('equalTo', ['$scope', function ($scope) {
        $scope.model = { email : 'a', confirmEmail:'b' };
    }]);
})();

Custom validator.

                            

                        
                            
(function () {
    angular.module('validatorApp').controller('custom', ['$scope', function ($scope) {
        $scope.model = { customField : 0 };
        $scope.customValidate = function(value){
          return { valid : value%2 === 1, message : 'Should be an odd number' };  
        };
    }]);
})();

Multiple validators.

                            

                        
                            
(function () {
    angular.module('validatorApp').controller('multiple', ['$scope', function ($scope) {
        $scope.model = { lengthAndRegex : '' };
    }]);
})();