Add async support to angular validator

README.md

@@ -1,4 +1,6 @@
-# Angular-Validator 
+This is just a fork of https://github.com/turinggroup/angular-validator with Asynchronous Validator, please see demo for example.
+
+# Angular-Validator
 [![Build Status](https://travis-ci.org/turinggroup/angular-validator.png)](https://travis-ci.org/turinggroup/angular-validator)
 
 Angular-Validator is an easy to use, powerful and lightweight AngularJS validation directive.
@@ -11,7 +13,7 @@ Angular-Validator is an easy to use, powerful and lightweight AngularJS validati
 * Works seamlessly with all native AngularJS validation directives and native HTML5 validation attributes.
 * Supports custom validation message templates and placement using Angular's native `ngMessages` directive.
 * Choose when to validate elements, on per-element basis. Choose between on form `submission`, `blur` or `dirty`(change).
-* All validation states and validation messages are accessible through `$scope.yourFormName.elementName`. 
+* All validation states and validation messages are accessible through `$scope.yourFormName.elementName`.
 * Prevents submission if the form is invalid
 * Built in `reset()` form method
 * Supports multi-field dependent validation (one field depends on another such as password matching)
@@ -20,7 +22,7 @@ Angular-Validator is an easy to use, powerful and lightweight AngularJS validati
 * Supports form invalid message service where manage invalid messages in one place and save code in HTML
 
 ## Why?
-Despite Angular's awesomeness, validation in Angular is still annoying. Surprisingly there are no seamless, user-friendly, well written Angular validation tools. Unlike other Angular validation tools, Angular-Validator works with out-of-the-box Angular and HTML5 validation, directives and attributes, allowing your forms to work well with the browser and other Javascript code. 
+Despite Angular's awesomeness, validation in Angular is still annoying. Surprisingly there are no seamless, user-friendly, well written Angular validation tools. Unlike other Angular validation tools, Angular-Validator works with out-of-the-box Angular and HTML5 validation, directives and attributes, allowing your forms to work well with the browser and other Javascript code.
 
 ## Installation
 1. Using bower:  `bower install tg-angular-validator`.

demo/app.js

@@ -1,7 +1,7 @@
 angular.module('angular-validator-demo', ['angularValidator']);
 
 
-angular.module('angular-validator-demo').controller('DemoCtrl', function($scope) {
+angular.module('angular-validator-demo').controller('DemoCtrl', function($scope, $http) {
 
 	$scope.submitMyForm = function() {
 		alert("Form submitted");
@@ -20,6 +20,14 @@ angular.module('angular-validator-demo').controller('DemoCtrl', function($scope)
 	};
 
 
+    $scope.userAsyncValidator = function(modelValue, viewValue) {
+        var endpoint = 'service/' + encodeURIComponent(modelValue) + '.json';
+
+        // assuming all 200 response is valid, and 404 is invalid
+        return $http.get(endpoint);
+    }
+
+
 	$scope.passwordValidator = function(password) {
 
 		if (!password) {
@@ -52,4 +60,4 @@ angular.module('angular-validator-demo').controller('DemoCtrl', function($scope)
             }
         }
     };
-});
+});

demo/index.html

@@ -67,6 +67,17 @@ <h4>Different types of validation:</h4>
                             validate-on="dirty"
                             required></div>
             </div>
+            <div class="form-group">
+                <label class="col-sm-2 control-label">Custom validation Function (async)</label>
+                <div class="col-sm-10">
+                    <input  type = "text"
+                            name = "username"
+                            class = "form-control"
+                            ng-model = "form.username"
+                            validator-async = "userAsyncValidator"
+                            validate-on="dirty"
+                            required></div>
+            </div>
             <div class="form-group">
                 <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                 <div class="col-sm-10">
@@ -188,8 +199,8 @@ <h4> <u>Scope Sneak Peak</u>
         <p>Form submitted: {{myForm.submitted}}</p>
 
     </div>
-    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>    <script src="app.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>    <script src="app.js"></script>
     <script src="app.js"></script>
     <script src="../dist/angular-validator.js"></script>
 </body>
-</html>
+</html>

demo/service/john.json

@@ -0,0 +1,5 @@
+{
+    "username": "john",
+    "first_name": "John",
+    "last_name": "Doe"
+}