Merge pull request #7 from mdekrey/v1.1

v1.1

README.md

@@ -1,35 +1,69 @@
 unobtrusive-angular-validation
 ==============================
 
-###Adding Unobtrusive Client Validation from the Microsoft .NET MVC Framework to AngularJS!
+This library is ultimately two portions that can be used independently; an AngularJS implementation of Microsoft's unobtrusive validation library for jQuery, and a small library of C# add-ons for MVC 5's validations.
 
-The primary focus of this package is to expose the .NET Framework's data validation syntax to AngularJS without relying on jQuery.
+###Unobtrusive Validation for AngularJS
 
-With ASP.Net WebPages or ASP.Net MVC, you can easily create text boxes and other form elements from your models using a syntax such as `@Html.TextBoxFor(m => m.Personal.FirstName)`.  This will render HTML for a fairly simple input box.  This causes the input elements to correspond nicely with the model mapper and, incidentally, the System.ComponentModel.DataAnnotations attributes that allow your classes to be validated in an aspect-oriented way.  In addition, the .Net Framework provides the capability to turn on built-in client-side validation using your web.config, and you'll see that your simple text-box has additional validation logic rendered right along with it.
+Version 2 of unobtrusive-angular-validation is built using Angular's existing validation framework through `ngModel`, while extending it for validation message tracking and allowing configuration for timing of messages.
 
-There's been a huge push for moving away from one-off inline JavaScript, even when it is generated; it allows the users' browsers to be able to cache the scripts, reducing server load and network time for your visitors. As a result, the .Net Framework also provides an "unobtrusive" mode for the validation, which renders additional attributes onto your form elements and then relies on jQuery Validation to perform the actual validation.
+####Use
 
-With AngularJS, the intention is to completely immerse yourself in the framework; they provide validation hooks with ngModel, flags for $valid on the formController, etc. As a result, we would prefer getting the validation information inside the AngularJS framework rather than relying on jQuery.
+To use the validation attributes provided, add `val="true"` to your element with `ng-model` and then add the `val-*` attributes you want. For a complete list and documentation, [see our rule unit tests](ResponsivePath.Validation.Scripts/Assets/TestScripts/Validators).
 
-In this repository, we've provided our validation.js along with a few tests to verify that it works.
+This also adds a `val-submit` directive that can be placed on an `input type="submit"` or a `button type="submit"` to prevent the form from submitting if the form is invalid.
 
-In addition, we are adding a few other utilities for integrating the `HtmlHelper`; we hope you get some use out of them!
+#####Throttled errors
+
+We've added error throttling to have an `$errors`-like object for various timings.  For example, the `blurErrors` property is populated when you lose focus, and the `submitErrors` property is populated when the form is submitted via the val-submit directive.
+
+There is also an `activeErrors` property that indicates what errors should be active based on your business rules; these can be adjusted at config time by the `validationProvider`.
+
+    validationProvider.setValidationMessagingTiming(ResponsivePath.Validation.Unobtrusive.ValidationTiming.DotNet);
+
+The DotNet timing has a form's active errors update only on submit, but models update on blur, just like you'd expect for the validation summary and direcYou can also configure your own timing rules if you have something other than the defaults.
+
+#####Adding rules
+You can also add your own rules!  At config time, use the `validationProvider` and call the `addValidator` method. For examples, see the [internal configuration file](ResponsivePath.Validation.Scripts/Assets/Scripts/zConfiguration.ts).
+
+For example, the regex rule is implemented as follows:
+
+    validationProvider.addValidator('regex', function (val, options) {
+        return !val || !!new RegExp(options.parameters.pattern).exec(val);
+    });
+
+Note that customized rules should not fail if the value is falsy; the required rule should be used if the value is required.
 
 ####JavaScript Download
 
 If you want to integrate directly with the javascript and aren't using NuGet (or are on a non-C# project), you can download the files from our repository directly:
 
-[Development](https://raw.githubusercontent.com/mdekrey/unobtrusive-angular-validation/master/js/angular.unobtrusive.validation.js)
-([templates](https://raw.githubusercontent.com/mdekrey/unobtrusive-angular-validation/master/js/angular.unobtrusive.validation.tpls.js))
+[Development](js/angular.unobtrusive.validation.js)
+([templates](js/angular.unobtrusive.validation.tpls.js))
 | 
-[Minified](https://raw.githubusercontent.com/mdekrey/unobtrusive-angular-validation/master/js/angular.unobtrusive.validation.min.js)
-([templates](https://raw.githubusercontent.com/mdekrey/unobtrusive-angular-validation/master/js/angular.unobtrusive.validation.tpls.min.js))
+[Minified](js/angular.unobtrusive.validation.min.js)
+([templates](js/angular.unobtrusive.validation.tpls.min.js))
 
 ####Bower Installation
 ```
 bower install angular-validation-unobtrusive
 ```
 
+
+###Adding Unobtrusive Client Validation from the Microsoft .NET MVC Framework to AngularJS!
+
+The primary focus of this package is to expose the .NET Framework's data validation syntax to AngularJS without relying on jQuery.
+
+With ASP.Net WebPages or ASP.Net MVC, you can easily create text boxes and other form elements from your models using a syntax such as `@Html.TextBoxFor(m => m.Personal.FirstName)`.  This will render HTML for a fairly simple input box.  This causes the input elements to correspond nicely with the model mapper and, incidentally, the System.ComponentModel.DataAnnotations attributes that allow your classes to be validated in an aspect-oriented way.  In addition, the .Net Framework provides the capability to turn on built-in client-side validation using your web.config, and you'll see that your simple text-box has additional validation logic rendered right along with it.
+
+There's been a huge push for moving away from one-off inline JavaScript, even when it is generated; it allows the users' browsers to be able to cache the scripts, reducing server load and network time for your visitors. As a result, the .Net Framework also provides an "unobtrusive" mode for the validation, which renders additional attributes onto your form elements and then relies on jQuery Validation to perform the actual validation.
+
+With AngularJS, the intention is to completely immerse yourself in the framework; they provide validation hooks with ngModel, flags for $valid on the formController, etc. As a result, we would prefer getting the validation information inside the AngularJS framework rather than relying on jQuery.
+
+In this repository, we've provided our validation.js along with a few tests to verify that it works.
+
+In addition, we are adding a few other utilities for integrating the `HtmlHelper`; we hope you get some use out of them!
+
 ####NuGet Installation
 
 You can install our NuGet packages (C# only) here:

ResponsivePath.Validation.Scripts/Assets/Content/Scripts/testrunner.html

@@ -8,10 +8,10 @@
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.1/mocha.min.css">
 
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
-	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
 
 	<script src="angular.unobtrusive.validation.js" data-cover></script>
-	<script src="angular.unobtrusive.validation.templates.js" data-cover></script>
+	<script src="angular.unobtrusive.validation.tpls.js" data-cover></script>
 
 	<style>
 		#blanket-main .bl-source {
@@ -25,7 +25,7 @@
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/1.7.3/sinon.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/2.2.1/mocha.js"></script>
 	<script>mocha.setup('bdd')</script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.27/angular-mocks.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular-mocks.js"></script>
 	<script src="blanketjs/blanket.js" data-cover-adapter="blanketjs/mocha-blanket.js" data-cover-flags="branchTracking"></script>
 	<script src="tests.js"></script>
 	<script>

ResponsivePath.Validation.Scripts/Assets/Content/demo.html

@@ -5,11 +5,14 @@
     <meta charset="utf-8" />
     <title></title>
 
-	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
+	<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
 	<script type="text/javascript" src="/scripts/angular.unobtrusive.validation.js"></script>
 	<script type="text/javascript" src="/scripts/angular.unobtrusive.validation.tpls.js"></script>
 	<script type="text/javascript">
         angular.module('unobtrusive.validation.demo', ['unobtrusive.validation'])
+            .config(function (validationProvider) {
+                validationProvider.setValidationMessagingTiming(ResponsivePath.Validation.Unobtrusive.ValidationTiming.DotNet);
+            })
         .run(function ($rootScope) {
             $rootScope.alert = function (arg) { window.alert(arg); };
         });

ResponsivePath.Validation.Scripts/Assets/Scripts/ValSubmitDirective.ts

@@ -3,20 +3,23 @@
     class ValSubmitDirective {
         restrict: string = 'A';
         require: string = '^?form';
-        private validation: ValidationService;
 
-        constructor(validation: ValidationService) {
+        private static $inject = ['validation'];
+        constructor(private validation: ValidationService) {
             this.validation = validation;
         }
 
         link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: ng.IFormController): void => {
             element.on('click', ($event) => {
-                // Cancels the suppression of validation messages, which reveals error classes, validation summaries, etc.
-                this.validation.cancelSuppress(scope);
-                this.validation.validationSummaryVisible(scope, true);
+                this.validation.ensureValidation(ctrl).submitted();
                 scope.$digest();
                 if (ctrl.$invalid) {
                     $event.preventDefault();
+
+                    if (this.validation.getShouldSetFormSubmitted()) {
+                        ctrl.$setSubmitted();
+                        scope.$digest();
+                    }
                 }
             });
 
@@ -34,17 +37,7 @@
                     watches[key]();
             });
         }
-
-        static Factory: ng.IDirectiveFactory = (() => {
-            var result = (validation: ValidationService) => {
-                return new ValSubmitDirective(validation);
-            };
-
-            result.$inject = ['validation'];
-
-            return result;
-        })();
     }
 
-    mod.directive('valSubmit', ValSubmitDirective.Factory);
+    modBase.directive('valSubmit', constructorAsInjectable(ValSubmitDirective));
 }