From 02497e8a3386e33e66513db9cbc83634f3134429 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Sat, 11 Aug 2012 16:00:09 +0200
Subject: [PATCH] Adding secrion for the ui-validate directive

---
 index.html | 43 +++++++++++++++++++++++++++++++++++++++++++
 js/app.js  | 13 +++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/index.html b/index.html
index b465571..1490da4 100644
--- a/index.html
+++ b/index.html
@@ -53,6 +53,7 @@
 								<li><a scrollto href="#directives-keypress">Keypress</a></li>
 								<li><a scrollto href="#directives-mask">Mask</a></li>
 								<li><a scrollto href="#directives-if">If</a></li>
+								<li><a scrollto href="#directives-validate">Validate</a></li>
 								<li><a scrollto href="#directives-reset">Reset</a></li>
 								<li><a scrollto href="#directives-animate">Animate</a></li>
 								<li><a scrollto href="#directives-modal">Modal</a></li>
@@ -456,6 +457,48 @@ <h3>How?</h3>
 				</div>
 			</section>
 
+            <section id="directives-validate">
+                <div class="page-header">
+                    <h1>Validate</h1>
+                </div>
+                <div class="row">
+                    <div class="span6">
+                        <h3>What?</h3>
+                        <p>The <code>ui-validate</code> directive makes it very easy to use any function as a validation function for input elements (using ngModel).</p>
+                        <div class="well" ng-controller="ValidateCtrl">
+                            <form name="form">
+
+                                <label>e-mail</label>
+                                <input name="email" type="email" required ng-model="email" ui-validate='{blacklist : notBlackListed}'>
+                                <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
+
+                                <label>repeat e-mail</label>
+                                <input name="emailRepeat" type="email" required ng-model="emailRepeat" ui-validate='repeatedOK'><span ng-show='form.emailRepeat.$error.validator'>Both e-mail adresses must match</span>
+                                <hr>
+                                is form valid: {{form.$valid}}<br>
+                                email errors: {{form.email.$error | json}}<br>
+                                emailRepeat errors: {{form.emailRepeat.$error | json}}
+                            </form>
+                        </div>
+                    </div>
+                    <div class="span6">
+                        <h3>How?</h3>
+                        <p>Just add the 'ui-validate' directive to your input field.</p>
+                        <p>2 types of syntax are supported:
+                        <ul>
+                            <li><code>ui-validate="myValidatorFunction"</code></li>
+                            <li><code>ui-validate="{foo : validateFoo, bar : validateBar}"</code></p></li>
+                        </ul>
+<pre class="prettyprint" ng-non-bindable>
+&lt;input ng-model="email" ui-validate='{blacklist : notBlackListed}'&gt;
+&lt;span ng-show='form.email.$error.blacklist'&gt;This e-mail is black-listed!&lt;/span&gt;
+</pre>
+                        <h3>Why?</h3>
+                        <p>Angular.js comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of a custom formatters and / or parsers. The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).</p>
+                    </div>
+                </div>
+            </section>
+
 			<section id="directives-reset" ng-controller="ResetCtrl">
 				<div class="page-header">
 					<h1>Reset</h1>
diff --git a/js/app.js b/js/app.js
index 02e285a..5b51ea2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -66,6 +66,19 @@ function KeypressCtrl($scope) {
 	};
 }
 
+function ValidateCtrl($scope) {
+
+  $scope.blackList = ['bad@domain.com','verybad@domain.com'];
+
+  $scope.notBlackListed = function(value) {
+    return $scope.blackList.indexOf(value) === -1;
+  };
+
+  $scope.repeatedOK = function(value) {
+    return $scope.email === value;
+  };
+}
+
 function ScrollfixCtrl($scope) {
 	$scope.scrollfix = -50;
 }