From 9c33ebc98acd89e37407d8259a67c457967eebfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rasmus=20=C3=98sterg=C3=A5rd?= <r@sser.dk>
Date: Fri, 20 Dec 2019 08:35:24 +0100
Subject: [PATCH] V8/feature/5914 broken backoffice validation (#6989)

* validate max length for textbox

* validate max length for textarea
---
 .../textarea/textarea.controller.js             | 17 ++++++++++++++++-
 .../propertyeditors/textarea/textarea.html      |  2 +-
 .../textbox/textbox.controller.js               | 14 +++++++++++++-
 .../views/propertyeditors/textbox/textbox.html  |  2 +-
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
index 884cc62d43..4a7fff99f8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.controller.js
@@ -15,7 +15,22 @@ function textAreaController($scope, validationMessageService) {
     if ($scope.model.config && $scope.model.config.maxChars) {
         $scope.model.maxlength = true;
     }
-    
+
+    $scope.$on("formSubmitting", function() {
+        if ($scope.isLengthValid()) {
+            $scope.textareaFieldForm.textarea.$setValidity("maxChars", true);
+        } else {
+            $scope.textareaFieldForm.textarea.$setValidity("maxChars", false);
+        }
+    });
+
+    $scope.isLengthValid = function() {
+        if (!$scope.model.maxlength) {
+            return true;
+        } 
+        return $scope.model.config.maxChars >= $scope.model.count;
+    }
+
     $scope.model.change = function () {
         if ($scope.model.value) {
             $scope.model.count = $scope.model.value.length;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
index 04bd8590d2..d255c4a5d6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textarea/textarea.html
@@ -10,7 +10,7 @@
         <div class="help" ng-if="model.maxlength === true && model.count >= (model.config.maxChars*.8) && model.count <= model.config.maxChars">
             <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize>
         </div>
-        <div class="help text-error" ng-if="model.maxlength === true && model.count > model.config.maxChars">
+        <div class="help text-error" ng-if="!isLengthValid()">
             <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize>
         </div>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
index e86d8caef4..b47c3584b3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.controller.js
@@ -11,7 +11,19 @@ function textboxController($scope, validationMessageService) {
         // if no max is specified in the config
         $scope.model.config.maxChars = 500;
     }
-    
+
+    $scope.$on("formSubmitting", function() {
+        if ($scope.isLengthValid()) {
+            $scope.textboxFieldForm.textbox.$setValidity("maxChars", true);
+        } else {
+            $scope.textboxFieldForm.textbox.$setValidity("maxChars", false);
+        }
+    });
+
+    $scope.isLengthValid = function() {
+        return $scope.model.config.maxChars >= $scope.model.count;
+    }
+
     $scope.model.change = function () {
         if ($scope.model.value) {
             $scope.model.count = $scope.model.value.length;
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
index e1f5dac733..5d86259e93 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/textbox/textbox.html
@@ -19,7 +19,7 @@
             <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize></p>
             <p aria-hidden="True"><localize key="textbox_characters_left" tokens="[model.config.maxChars - model.count]" watch-tokens="true">%0% characters left.</localize></p>
         </div>
-        <div class="help text-error" ng-if="model.count > model.config.maxChars">
+        <div class="help text-error" ng-if="!isLengthValid()">
             <p class="sr-only" tabindex="0">{{model.label}} <localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
             <p aria-hidden="true"><localize key="textbox_characters_exceed" tokens="[model.config.maxChars, model.count - model.config.maxChars]" watch-tokens="true">Maximum %0% characters, <strong>%1%</strong> too many.</localize></p>
         </div>