diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valpropertymsg.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valpropertymsg.directive.js
index 0369b4bd2e1e..5b0c4c11aeaf 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/validation/valpropertymsg.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/validation/valpropertymsg.directive.js
@@ -24,8 +24,7 @@ function valPropertyMsg(serverValidationManager, localizationService) {
             var hasError = false;
 
             //create properties on our custom scope so we can use it in our template
-            scope.errorMsg = "";
-            
+            scope.errorMsg = "";            
             
             //the property form controller api
             var formCtrl = ctrl[0];
@@ -34,11 +33,13 @@ function valPropertyMsg(serverValidationManager, localizationService) {
             //the property controller api
             var umbPropCtrl = ctrl[2];
             //the variants controller api
-            var umbVariantCtrl = ctrl[3];
+            var umbVariantCtrl = ctrl[3];            
             
             var currentProperty = umbPropCtrl.property;
             scope.currentProperty = currentProperty;
+
             var currentCulture = currentProperty.culture;         
+            var isMandatory = currentProperty.validation.mandatory;
 
             var labels = {};
             localizationService.localize("errors_propertyHasErrors").then(function (data) {
@@ -91,23 +92,25 @@ function valPropertyMsg(serverValidationManager, localizationService) {
                 if (!watcher) {
                     watcher = scope.$watch("currentProperty.value",
                         function (newValue, oldValue) {
-                            
                             if (angular.equals(newValue, oldValue)) {
                                 return;
                             }
 
                             var errCount = 0;
+
                             for (var e in formCtrl.$error) {
                                 if (angular.isArray(formCtrl.$error[e])) {
                                     errCount++;
                                 }
-                            }
+                            }         
 
                             //we are explicitly checking for valServer errors here, since we shouldn't auto clear
                             // based on other errors. We'll also check if there's no other validation errors apart from valPropertyMsg, if valPropertyMsg
                             // is the only one, then we'll clear.
 
-                            if (errCount === 0 || (errCount === 1 && angular.isArray(formCtrl.$error.valPropertyMsg)) || (formCtrl.$invalid && angular.isArray(formCtrl.$error.valServer))) {
+                            if (errCount === 0 
+                                || (errCount === 1 && angular.isArray(formCtrl.$error.valPropertyMsg)) 
+                                || (formCtrl.$invalid && angular.isArray(formCtrl.$error.valServer))) {
                                 scope.errorMsg = "";
                                 formCtrl.$setValidity('valPropertyMsg', true);
                             } else if (showValidation && scope.errorMsg === "") {
@@ -136,6 +139,21 @@ function valPropertyMsg(serverValidationManager, localizationService) {
                     }
                     //if there are any errors in the current property form that are not valPropertyMsg
                     else if (_.without(_.keys(formCtrl.$error), "valPropertyMsg").length > 0) {
+                        
+                        // errors exist, but if the property is NOT mandatory and has no value, the errors should be cleared
+                        if (!isMandatory && !currentProperty.value) {
+                            hasError = false;
+                            showValidation = false;
+                            scope.errorMsg = "";
+
+                            // if there's no value, the controls can be reset, which clears the error state on formCtrl
+                            for (let control of formCtrl.$getControls()) {
+                                control.$setValidity();
+                            }
+
+                            return;
+                        }
+
                         hasError = true;
                         //update the validation message if we don't already have one assigned.
                         if (showValidation && scope.errorMsg === "") {