From e571e68d0c0de1e2fc49667178db896e2e2bf07c Mon Sep 17 00:00:00 2001
From: Shannon <sdeminick@gmail.com>
Date: Wed, 26 Jun 2013 13:33:24 +1000
Subject: [PATCH] ensures validation msgs are not shown until the first submit.

---
 .../directives/valshowvalidation.directive.js | 26 ++++++++++++++++++
 src/Umbraco.Web.UI.Client/src/less/forms.less | 18 +++++++------
 src/Umbraco.Web.UI.Client/src/less/navs.less  | 27 +++++--------------
 .../src/views/content/edit.html               |  2 +-
 4 files changed, 43 insertions(+), 30 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/valshowvalidation.directive.js

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/valshowvalidation.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/valshowvalidation.directive.js
new file mode 100644
index 0000000000..1b7f617bcf
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/valshowvalidation.directive.js
@@ -0,0 +1,26 @@
+
+/**
+* @ngdoc directive 
+* @name umbraco.directive:valShowValidation
+* @restrict A
+* @description Used to toggle the show-validation class on the element containing the form elements to validate.
+*   This is used because we don't want to show validation messages until after the form is submitted and then reset
+*   the process when the form is successful. We do this by listening to the current controller's saving and saved events.
+**/
+function valShowValidation() {
+    return {
+        require: "ngController",
+        restrict: "A",
+        link: function (scope, element, attr, ctrl) {
+            //listen for the forms saving event
+            scope.$on("saving", function (ev, args) {
+                element.addClass("show-validation");
+            });
+            //listen for the forms saved event
+            scope.$on("saved", function (ev, args) {
+                element.removeClass("show-validation");
+            });
+        }
+    };
+}
+angular.module('umbraco.directives').directive("valShowValidation", valShowValidation);
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less
index c21478be67..1fbf486fac 100644
--- a/src/Umbraco.Web.UI.Client/src/less/forms.less
+++ b/src/Umbraco.Web.UI.Client/src/less/forms.less
@@ -343,34 +343,36 @@ input[type="checkbox"][readonly] {
 
 
 //SD: NOTE: Had to change these to use our 'form' prefixed colors since we cannot
-// whare colors with the notifications/alerts
+// whare colors with the notifications/alerts. Also had to change them so that 
+// we do not show any errors unless the containing element has the show-validation
+// class assigned.
 
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
 // Warning
-.control-group.warning {
+.show-validation .control-group.warning {
   .formFieldState(@formWarningText, @formWarningText, @formWarningBackground);
 }
 // Error
-.control-group.error {
+.show-validation .control-group.error {
   .formFieldState(@formErrorText, @formErrorText, @formErrorBackground);
 }
 // Success
-.control-group.success {
+.show-validation .control-group.success {
   .formFieldState(@formSuccessText, @formSuccessText, @formSuccessBackground);
 }
 // Success
-.control-group.info {
+.show-validation .control-group.info {
   .formFieldState(@formInfoText, @formInfoText, @formInfoBackground);
 }
 
 // HTML5 invalid states 
 // Shares styles with the .control-group.error above
 
-input:focus:invalid,
-textarea:focus:invalid,
-select:focus:invalid {
+.show-validation input:focus:invalid,
+.show-validation textarea:focus:invalid,
+.show-validation select:focus:invalid {
   color: @formErrorText;
   border-color: #ee5f5b;
   &:focus {
diff --git a/src/Umbraco.Web.UI.Client/src/less/navs.less b/src/Umbraco.Web.UI.Client/src/less/navs.less
index 2a88c2638a..620d24556e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/navs.less
+++ b/src/Umbraco.Web.UI.Client/src/less/navs.less
@@ -141,9 +141,9 @@
 }
 
 //SD: NOTE: Added tab error states
-.nav-tabs > li.error > a,
-.nav-tabs > li.error > a:hover,
-.nav-tabs > li.error > a:focus {
+.show-validation .nav-tabs > li.error > a,
+.show-validation .nav-tabs > li.error > a:hover,
+.show-validation .nav-tabs > li.error > a:focus {
   color: @formErrorText;
   border-top-color: @formErrorBorder;
   border-left-color: @formErrorBorder;
@@ -151,9 +151,9 @@
   background-color: @formErrorBackground;
 }
 
-.nav-tabs > li.active.error > a,
-.nav-tabs > li.active.error > a:hover,
-.nav-tabs > li.active.error > a:focus {
+.show-validation .nav-tabs > li.active.error > a,
+.show-validation .nav-tabs > li.active.error > a:hover,
+.show-validation .nav-tabs > li.active.error > a:focus {
   color: @formErrorText;
   border-top-color: @formErrorBorder;
   border-left-color: @formErrorBorder;
@@ -161,21 +161,6 @@
   background-color: @bodyBackground;
 }
 
-/*.nav-tabs > .active.error > a,
-.nav-tabs > .active.error > a:hover,
-.nav-tabs > .active.error > a:focus {
-  color: @formErrorText;
-  border-top-color: @formErrorBorder;
-  border-left-color: @formErrorBorder;
-  border-left-color: @formErrorBorder;
-  background-color: @formErrorBackground;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-    @shadow: 0 0 6px lighten(#ee5f5b, 20%);
-    .box-shadow(@shadow);
-  }
-}*/
-
 
 // PILLS
 // -----
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
index a6b49cfa69..142d3cedea 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
@@ -1,5 +1,5 @@
 <ng-form name="contentForm">
-    <umb-panel ng-controller="Umbraco.Editors.ContentEditController">  
+    <umb-panel ng-controller="Umbraco.Editors.ContentEditController" val-show-validation>
         <umb-header tabs="content.tabs">
                 <div class="span4">
                     <input type="text" placeholder="Enter a page title" headline ng-model="content.name" />