Fix required taxonomy fields invalid state (#17443)

Author: xtomas

src/OrchardCore.Modules/OrchardCore.Taxonomies/Drivers/TaxonomyFieldDisplayDriver.cs

@@ -77,7 +77,7 @@ public override async Task<IDisplayResult> UpdateAsync(TaxonomyField field, Upda
         if (settings.Required && field.TermContentItemIds.Length == 0)
         {
             context.Updater.ModelState.AddModelError(
-                nameof(EditTaxonomyFieldViewModel.TermEntries),
+                $"{Prefix}.{nameof(EditTaxonomyFieldViewModel.TermEntries)}",
                 S["A value is required for {0}.", context.PartFieldDefinition.DisplayName()]);
         }
 

src/OrchardCore.Modules/OrchardCore.Taxonomies/Drivers/TaxonomyFieldTagsDisplayDriver.cs

@@ -82,7 +82,7 @@ public override async Task<IDisplayResult> UpdateAsync(TaxonomyField field, Upda
         if (settings.Required && field.TermContentItemIds.Length == 0)
         {
             context.Updater.ModelState.AddModelError(
-                nameof(EditTagTaxonomyFieldViewModel.TermContentItemIds),
+                $"{Prefix}.{nameof(EditTagTaxonomyFieldViewModel.TermContentItemIds)}",
                 S["A value is required for {0}.", context.PartFieldDefinition.DisplayName()]);
         }
 

src/OrchardCore.Modules/OrchardCore.Taxonomies/Views/TaxonomyField-Tags.Edit.cshtml

@@ -48,7 +48,7 @@
                 <div class="w-100">
                     <input asp-for="TermContentItemIds" type="hidden" v-model="selectedTagTermsIds" />
 
-                    <vue-multiselect v-model="selectedTagTerms"
+                    <vue-multiselect asp-validation-class-for="TermContentItemIds" v-model="selectedTagTerms"
                                  placeholder="@T["Type to search"]"
                                  select-label="@T["Select"]"
                                  deselect-label="@T["Remove"]"

src/OrchardCore.Modules/OrchardCore.Taxonomies/Views/TaxonomyField.Edit.cshtml

@@ -24,7 +24,7 @@
                 @T["The taxonomy could not be found. Please check the settings for this field."]
             </div>
         }
-        <div>
+        <div class="term-entries-area" asp-validation-class-for="TermEntries">
             @for (var i = 0; i < Model.TermEntries.Count; i++)
             {
                 var entry = Model.TermEntries[i];

src/OrchardCore.Themes/TheAdmin/Assets/scss/components/_validations.scss

@@ -99,3 +99,16 @@ textarea.form-control.input-validation-error {
 .input-group > .form-floating:not(:focus-within).input-validation-error {
     z-index: 4;
 }
+
+.has-validation-error.is-invalid.multiselect {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    border-color: var(--bs-form-invalid-border-color);
+}
+
+.has-validation-error.is-invalid.term-entries-area {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+    border-color: var(--bs-form-invalid-border-color);
+    padding: 0.375rem 0.75rem;
+}

src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.css

@@ -8753,6 +8753,19 @@ textarea.form-control.input-validation-error {
   z-index: 4;
 }
 
+.has-validation-error.is-invalid.multiselect {
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.has-validation-error.is-invalid.term-entries-area {
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  border-color: var(--bs-form-invalid-border-color);
+  padding: 0.375rem 0.75rem;
+}
+
 .vue-multiselect {
   color: var(--bs-body-color) !important;
   background-color: var(--bs-body-bg) !important;

src/OrchardCore.Themes/TheAdmin/wwwroot/css/TheAdmin.min.css

@@ -112,3 +112,16 @@ textarea.form-control.input-validation-error {
 .input-group > .form-floating:not(:focus-within).input-validation-error {
   z-index: 4;
 }
+
+.has-validation-error.is-invalid.multiselect {
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  border-color: var(--bs-form-invalid-border-color);
+}
+
+.has-validation-error.is-invalid.term-entries-area {
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  border-color: var(--bs-form-invalid-border-color);
+  padding: 0.375rem 0.75rem;
+}