Fix model validation error display

WebCms/Views/LeafInput/Create.cshtml

@@ -22,6 +22,7 @@
             <form id="fileupload" action="/Backload/FileHandler" method="POST" enctype="multipart/form-data">
 
                 <h4 class="card-title">Files</h4>
+                @Html.Partial("_ValidationField", "Files")
                 <div class="container-fluid fileupload-buttonbar">
                     <div class="row">
                         <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
@@ -56,12 +57,12 @@
                     <!-- The extended global progress state -->
                     @*<div class="progress-extended">&nbsp;</div>*@
                 </div>
-                @Html.Partial("_ValidationField", "Files")
                 <!-- The table listing the files available for upload/download -->
                 <div class="table-responsive card mb-4">
                     <table role="presentation" class="table table-sm table-striped mb-0"><tbody class="files"></tbody></table>
                 </div>
             </form>
+            
 
             @using (Html.BeginUmbracoForm<LeafInputController>("Submit", null, new { id = "create" }))
             {

WebCms/Views/Shared/_ValidationField.cshtml

@@ -1,12 +1,9 @@
 @model string
 @{
     var fieldName = Model;
+    var modelState = ViewData.ModelState[fieldName];
 }
-@if (ViewData.ModelState[fieldName] != null 
-     && ViewData.ModelState[fieldName].Errors.Any())
+@foreach (var error in modelState?.Errors ?? new ModelErrorCollection())
 {
-        foreach (var error in ViewData.ModelState[fieldName].Errors)
-        {
-            <div id="@fieldName-error" class="is-invalid invalid-feedback">@error.ErrorMessage</div>
-        }
-}
+    <div id="@fieldName-error" class="text-danger field-validation-error">@error.ErrorMessage</div>
+}