Fixes: U4-7136 Client side validation no longer works for header text

src/Umbraco.Web.UI.Client/src/less/forms.less

@@ -441,7 +441,8 @@ input[type="checkbox"][readonly] {
   .formFieldState(@formWarningText, @formWarningText, @formWarningBackground);
 }
 // Error
-.show-validation.ng-invalid .control-group.error {
+.show-validation.ng-invalid .control-group.error, 
+.show-validation.ng-invalid .umb-panel-header-content-wrapper {
     .formFieldState(@formErrorText, @formErrorText, @formErrorBackground);
 }
 // Success

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html

@@ -13,13 +13,17 @@
 
                <div class="umb-panel-header-title-wrapper">
 
-                  <input type="text" class="umb-panel-header-name-input" placeholder="Enter name..." 
-                         ng-if="!nameLocked" 
-                         ng-model="$parent.name"  
-                         ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}" 
-                         umb-auto-focus 
-                         focus-on-filled="true"
-                         required />
+                   <ng-form name="headerNameForm">
+                       <input type="text" class="umb-panel-header-name-input" placeholder="Enter name..."
+                              name="headerName"
+                              ng-show="!nameLocked"
+                              ng-model="name"
+                              ng-class="{'name-is-empty': $parent.name===null || $parent.name===''}"
+                              umb-auto-focus
+                              focus-on-filled="true"
+                              required />
+                   </ng-form>
+
                   <div class="umb-panel-header-name" ng-if="nameLocked">{{ name }}</div>
 
                   <umb-generate-alias class="umb-panel-header-alias" ng-if="!hideAlias" alias="$parent.alias" alias-from="$parent.name" enable-lock="true"></umb-generate-alias>