Adding doc and examples for uiValidate

Author: pkozlowski-opensource

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>
@@ -156,7 +157,7 @@ <h3>How?</h3>
 &lt;script&gt;
 myModule.value(&#x27;ui.config&#x27;, {
    // The ui-jq directive namespace
-   jq: { 
+   jq: {
       // The qtip namespace
       qtip: {
          // qTip options. This object will be used as the defaults
@@ -217,7 +218,7 @@ <h3>How?</h3>
 					</div>
 				</div>
 			</section>
-			
+
 			<section id="directives-map" ng-controller="MapCtrl">
 				<div class="page-header">
 					<h1>Google Maps</h1>
@@ -234,21 +235,21 @@ <h4>Click to add a marker!</h4>
 									</a>
 								</li>
 							</ul>
-							
+
 							<!-- this is the confusing part. we have to point the map marker directive
 								at an existing google.maps.Marker object, so it can hook up events -->
 							<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
 								ui-event="{'map-click': 'openMarkerInfo(marker)'}">
 							</div>
-							
+
 							<div ui-map-info-window="myInfoWindow">
 								<h1>Marker</h1>
 								Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
 								<a class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
 							</div>
 						</div>
 						<div ui-map="myMap" class="span8 map"
-							ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }" 
+							ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
 							ui-options="mapOptions">
 						</div>
 					</div>
@@ -277,7 +278,7 @@ <h3>How?</h3>
 &lt;/div&gt;
 
 &lt;div ui-map=&quot;myMap&quot; class=&quot;map&quot;
-  ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot; 
+  ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
   ui-options=&quot;mapOptions&quot;&gt;
 &lt;/div&gt;
 
@@ -288,7 +289,7 @@ <h3>How?</h3>
   center: new google.maps.LatLng(35.784, -78.670),
   zoom: 15,
   mapTypeId: google.maps.MapTypeId.ROADMAP
-}; 
+};
 
 $scope.addMarker = function($event) {
   $scope.myMarkers.push(new google.maps.Marker({
@@ -333,13 +334,13 @@ <h3>What?</h3>
 						<p>Calendar picker with ng-model integration</p>
 						<div class="well">
 							<ng-form name="dateForm">
-								<p><input name="dateField" value="Click Here for Datepicker" ng-model="date" ui-date></p>					
+								<p><input name="dateField" value="Click Here for Datepicker" ng-model="date" ui-date></p>
 							</ng-form>
 							<p>Selected Date: {{ date }}</p>
 							<p>Formatted Date: {{ date | date: 'mediumDate'}}</p>
 							<p>Selected Month: {{ date.getMonth() }}</p>
 							<div ng-model="date" ui-date></div>
-						</div>	
+						</div>
 					</div>
 					<div class="span6">
 						<h3>Why?</h3>
@@ -400,7 +401,7 @@ <h3>Why?</h3>
 				<h3>How?</h3>
 <pre class="prettyprint" ng-non-bindable>
 &lt;input ng-model="maskDemo" ui-mask="'99-99-9999'"&gt;
-	
+
 </pre>
 			</section>
 
@@ -456,6 +457,53 @@ <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>
+                                <br>is form valid: {{form.$valid}}
+                                <br>email errors: {{form.email.$error | json}}
+                            </form>
+                        </div>
+                        <h3>Why?</h3>
+                        <p>AngularJS comes with several built-in validation mechanism for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of 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 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="validateFoo"</code></li>
+                            <li><code>ui-validate="{foo : validateFoo, bar : validateBar}"</code></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>
+                        and in a controller:
+<pre class="prettyprint" ng-non-bindable>
+function ValidateCtrl($scope) {
+  $scope.blackList = ['bad@domain.com','verybad@domain.com'];
+  $scope.notBlackListed = function(value) {
+    return $scope.blackList.indexOf(value) === -1;
+  };
+}
+</pre>
+                        </p>
+                    </div>
+                </div>
+            </section>
+
 			<section id="directives-reset" ng-controller="ResetCtrl">
 				<div class="page-header">
 					<h1>Reset</h1>

js/app.js

@@ -66,6 +66,14 @@ function KeypressCtrl($scope) {
 	};
 }
 
+function ValidateCtrl($scope) {
+
+  $scope.blackList = ['bad@domain.com','verybad@domain.com'];
+  $scope.notBlackListed = function(value) {
+    return $scope.blackList.indexOf(value) === -1;
+  };
+}
+
 function ScrollfixCtrl($scope) {
 	$scope.scrollfix = -50;
 }