Consolidate admin required fields

+ add star char for all required fields + add validation message for required input field like in TitlePart * consolidate color for start and validation error messages * consolidate error message texts - remove client validation from inputs because of inconsistent form behaviour dependent on used browser, selected locale, ... OrchardCMS#15434
xtomas · Mar 19, 2024 · ede319a · ede319a
1 parent 65a131b
commit ede319a
Show file tree

Hide file tree

Showing 45 changed files with 114 additions and 60 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.Autoroute/Views/AutoroutePart.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Autoroute/Views/AutoroutePart.Edit.cshtml
@@ -28,7 +28,7 @@
 
 <div class="autoroute-disabled" style="@(Model.Disabled ? "display: none" : string.Empty)">
     <div class="@Orchard.GetWrapperClasses()" asp-validation-class-for="Path">
-        <label asp-for="Path" class="@Orchard.GetLabelClasses()">@T["Permalink"]</label>
+        <label asp-for="Path" class="@Orchard.GetLabelClasses(inputRequired: true)">@T["Permalink"]</label>
         <div class="@Orchard.GetEndClasses()">
             <div class="input-group">
                 @if (!string.IsNullOrWhiteSpace(site.BaseUrl))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Drivers/NumericFieldDisplayDriver.cs b/src/OrchardCore.Modules/OrchardCore.ContentFields/Drivers/NumericFieldDisplayDriver.cs
@@ -77,7 +77,7 @@ public override async Task<IDisplayResult> UpdateAsync(NumericField field, IUpda
                 {
                     if (settings.Required)
                     {
-                        updater.ModelState.AddModelError(Prefix, nameof(field.Value), S["The {0} field is required.", context.PartFieldDefinition.DisplayName()]);
+                        updater.ModelState.AddModelError(Prefix, nameof(field.Value), S["A value is required for {0}.", context.PartFieldDefinition.DisplayName()]);
                     }
                 }
                 else if (!decimal.TryParse(viewModel.Value, NumberStyles.Any, CultureInfo.CurrentUICulture, out var value))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Drivers/UserPickerFieldDisplayDriver.cs b/src/OrchardCore.Modules/OrchardCore.ContentFields/Drivers/UserPickerFieldDisplayDriver.cs
@@ -85,7 +85,7 @@ public override async Task<IDisplayResult> UpdateAsync(UserPickerField field, IU
 
                 if (settings.Required && field.UserIds.Length == 0)
                 {
-                    updater.ModelState.AddModelError(Prefix, nameof(field.UserIds), S["The {0} field is required.", context.PartFieldDefinition.DisplayName()]);
+                    updater.ModelState.AddModelError(Prefix, nameof(field.UserIds), S["The value is required for {0}.", context.PartFieldDefinition.DisplayName()]);
                 }
 
                 if (!settings.Multiple && field.UserIds.Length > 1)

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Drivers/YoutubeFieldDisplayDriver.cs b/src/OrchardCore.Modules/OrchardCore.ContentFields/Drivers/YoutubeFieldDisplayDriver.cs
@@ -56,7 +56,7 @@ public override async Task<IDisplayResult> UpdateAsync(YoutubeField field, IUpda
                 var settings = context.PartFieldDefinition.GetSettings<YoutubeFieldSettings>();
                 if (settings.Required && string.IsNullOrWhiteSpace(model.RawAddress))
                 {
-                    updater.ModelState.AddModelError(Prefix, nameof(model.RawAddress), S["A value is required for '{0}'.", context.PartFieldDefinition.DisplayName()]);
+                    updater.ModelState.AddModelError(Prefix, nameof(model.RawAddress), S["A value is required for {0}.", context.PartFieldDefinition.DisplayName()]);
                 }
                 else
                 {

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml
@@ -16,7 +16,7 @@
 <style asp-name="vue-multiselect" at="Foot"></style>
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.ContentItemIds)_FieldWrapper">
-    <label asp-for="ContentItemIds" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="ContentItemIds" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">
 

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField-Localized.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField-Localized.Edit.cshtml
@@ -7,11 +7,12 @@
 }
 
 <div class="@Orchard.GetWrapperClasses()">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
-                <input asp-for="Value" type="text" class="form-control content-preview-select datepicker" required="@settings.Required" />
+                <input asp-for="Value" type="text" class="form-control content-preview-select datepicker" />
+                <span asp-validation-for="Value"></span>
             </div>
         </div>
         @if (!string.IsNullOrEmpty(settings.Hint))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml
@@ -6,11 +6,12 @@
 
 <script asp-name="jQuery-ui-i18n" at="Foot"></script>
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
-                <input asp-for="Value" type="date" class="form-control content-preview-select" required="@settings.Required" />
+                <input asp-for="Value" type="date" class="form-control content-preview-select" />
+                <span asp-validation-for="Value"></span>
             </div>
         </div>
         @if (!string.IsNullOrEmpty(settings.Hint))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml
@@ -5,11 +5,12 @@
 }
 <script asp-name="jQuery-ui-i18n" at="Foot"></script>
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.LocalDateTime)_FieldWrapper">
-    <label asp-for="LocalDateTime" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="LocalDateTime" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
-                <input asp-for="LocalDateTime" type="datetime-local" class="form-control content-preview-select" required="@settings.Required" />
+                <input asp-for="LocalDateTime" type="datetime-local" class="form-control content-preview-select" />
+                <span asp-validation-for="LocalDateTime"></span>
             </div>
         </div>
 

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml
@@ -3,19 +3,19 @@
 @{
     var settings = Model.PartFieldDefinition.GetSettings<LinkFieldSettings>();
     var isRequired = settings.Required && string.IsNullOrWhiteSpace(settings.DefaultUrl);
-    var isTextRequired = settings.LinkTextMode == LinkTextMode.Required && string.IsNullOrWhiteSpace(settings.DefaultText);
     var urlClass = settings.Required ? "required" : null;
     var textClass = settings.LinkTextMode == LinkTextMode.Required ? "required" : null;
     var useFormFloating = string.IsNullOrWhiteSpace(settings.UrlPlaceholder) || string.IsNullOrWhiteSpace(settings.TextPlaceholder);
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
-    <label asp-for="Url" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Url" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="row">
             <div class="col-md-6" asp-validation-class-for="Url">
                 <div class="@(useFormFloating ? "form-floating" : string.Empty)">
-                    <input asp-for="Url" class="form-control content-preview-text" placeholder="@settings.UrlPlaceholder" required="@isRequired" />
+                    <input asp-for="Url" class="form-control content-preview-text" placeholder="@settings.UrlPlaceholder" />
+                    <span asp-validation-for="Url"></span>
                     @if (useFormFloating)
                     {
                         <label asp-for="Url" class="@urlClass">@T["Url"]</label>
@@ -31,7 +31,7 @@
             {
                 <div class="col-md-6" asp-validation-class-for="Text">
                     <div class="@(useFormFloating ? "form-floating" : string.Empty)">
-                        <input asp-for="Text" type="text" class="form-control content-preview-text" placeholder="@settings.TextPlaceholder" required="@isTextRequired" />
+                        <input asp-for="Text" type="text" class="form-control content-preview-text" placeholder="@settings.TextPlaceholder" />
                         @if (useFormFloating)
                         {
                             <label asp-for="Text" class="@textClass">@T["Link text"]</label>

diff --git a/...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml b/...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml
@@ -20,7 +20,7 @@
 <style asp-name="vue-multiselect" at="Foot"></style>
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.LocalizationSets)_FieldWrapper">
-    <label asp-for="LocalizationSets" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="LocalizationSets" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="LocalizationSetContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">
 

diff --git a/...chardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-CheckboxList.Edit.cshtml b/...chardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-CheckboxList.Edit.cshtml
@@ -13,7 +13,7 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Values)_FieldWrapper">
-    <label class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         @for (int i = 0; i < options.Count; i++)
         {

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-Picker.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-Picker.Edit.cshtml
@@ -28,7 +28,7 @@
 <style asp-name="vue-multiselect" at="Foot"></style>
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Values)_FieldWrapper">
-    <label class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div id="@vueElementId" class="multitextfieldpicker" data-selectedvalues="@jSelectedValues" data-options="@jOptions" data-valueskey="@valuesKey">
             <div class="w-xl-50">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField.Edit.cshtml
@@ -13,9 +13,10 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Values)_FieldWrapper">
-    <label asp-for="Values" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Values" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <select class="form-select content-preview-select" asp-for="Values" asp-items="options" multiple></select>
+        <span asp-validation-for="Values"></span>
         @if (!string.IsNullOrEmpty(settings.Hint))
         {
             <span class="hint">@settings.Hint</span>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Range.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Range.Edit.cshtml
@@ -13,7 +13,7 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@name</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@name</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
@@ -22,13 +22,14 @@
                     {
                         <span class="input-group-text">@min</span>
                     }
-                    <input asp-for="Value" class="form-control content-preview-select" placeholder="@settings.Placeholder" required="@settings.Required" onchange="numericFieldRangeSync('@(id)-range', value);" />
+                    <input asp-for="Value" class="form-control content-preview-select" placeholder="@settings.Placeholder" onchange="numericFieldRangeSync('@(id)-range', value);" />
                     @if (settings.Maximum.HasValue)
                     {
                         <span class="input-group-text">@max</span>
                     }
                 </div>
                 <input id="@(id)-range" class="form-control-range" type="range" min="@min" max="@max" step="@step" oninput="numericFieldRange('@(id)', value);" onchange="numericFieldRange('@(id)', value);" />
+                <span asp-validation-for="Value"></span>
             </div>
         </div>
         @if (!string.IsNullOrEmpty(settings.Hint))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Select.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Select.Edit.cshtml
@@ -9,7 +9,7 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@name</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@name</label>
     <div class="@Orchard.GetEndClasses()">
 
         <select asp-for="Value" class="form-select content-preview-select">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Slider.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Slider.Edit.cshtml
@@ -15,7 +15,7 @@
 <script asp-name="nouislider" at="Foot"></script>
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@name</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@name</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
@@ -24,7 +24,7 @@
                     {
                         <span class="input-group-text">@min</span>
                     }
-                    <input asp-for="Value" class="form-control content-preview-select" placeholder="@settings.Placeholder" required="@settings.Required" />
+                    <input asp-for="Value" class="form-control content-preview-select" placeholder="@settings.Placeholder" />
                     @if (settings.Maximum.HasValue)
                     {
                         <span class="input-group-text">@max</span>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Spinner.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField-Spinner.Edit.cshtml
@@ -16,7 +16,7 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@name</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@name</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
@@ -25,7 +25,7 @@
                     {
                         <span class="input-group-text">@min</span>
                     }
-                    <input asp-for="Value" typeof="text" class="form-control content-preview-select" placeholder="@settings.Placeholder" required="@settings.Required" />
+                    <input asp-for="Value" typeof="text" class="form-control content-preview-select" placeholder="@settings.Placeholder" />
                     <button class="btn btn-outline-secondary" type="button" onclick="numericFieldSpinner('@(id)', @(scale), -@(step), @(min), @(max))"><i class="fa-solid fa-minus" aria-hidden="true"></i></button>
                     <button class="btn btn-outline-secondary" type="button" onclick="numericFieldSpinner('@(id)', @(scale), +@(step), @(min), @(max))"><i class="fa-solid fa-plus" aria-hidden="true"></i></button>
                     @if (settings.Maximum.HasValue)

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/NumericField.Edit.cshtml
@@ -8,7 +8,7 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Value)_FieldWrapper">
-    <label asp-for="Value" class="@Orchard.GetLabelClasses()">@name</label>
+    <label asp-for="Value" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@name</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="@Orchard.GetLimitedWidthWrapperClasses()">
             <div class="@Orchard.GetLimitedWidthClasses()">
@@ -17,12 +17,13 @@
                     {
                         <span class="input-group-text">@min</span>
                     }
-                    <input asp-for="Value" class="form-control content-preview-select" placeholder="@settings.Placeholder" required="@settings.Required" />
+                    <input asp-for="Value" class="form-control content-preview-select" placeholder="@settings.Placeholder" />
                     @if (settings.Maximum.HasValue)
                     {
                         <span class="input-group-text">@max</span>
                     }
                 </div>
+                <span asp-validation-for="Value"></span>
             </div>
         </div>
         @if (!string.IsNullOrEmpty(settings.Hint))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-CodeMirror.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-CodeMirror.Edit.cshtml
@@ -6,9 +6,10 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
-    <label asp-for="Text" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Text" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <textarea asp-for="Text" rows="5" class="form-control content-preview-text" dir="@culture.GetLanguageDirection()"></textarea>
+        <span asp-validation-for="Text"></span>
         @if (!string.IsNullOrEmpty(settings.Hint))
         {
             <span class="hint">@settings.Hint</span>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-Color.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-Color.Edit.cshtml
@@ -5,9 +5,10 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
-    <label asp-for="Text" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Text" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses("pt-lg-2")">
         <input asp-for="Text" class="form-control content-preview-text" type="color" style="min-height: 2.25rem" />
+        <span asp-validation-for="Text"></span>
         @if (!string.IsNullOrEmpty(settings.Hint))
         {
             <span class="hint">@settings.Hint</span>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-Email.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-Email.Edit.cshtml
@@ -5,11 +5,12 @@
 }
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
-    <label asp-for="Text" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Text" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <div class="input-group">
             <span class="input-group-text">@@</span>
             <input asp-for="Text" class="form-control content-preview-text" type="email" />
+            <span asp-validation-for="Text"></span>
         </div>
         @if (!string.IsNullOrEmpty(settings.Hint))
         {

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-IconPicker.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-IconPicker.Edit.cshtml
@@ -10,7 +10,7 @@
 <script asp-name="iconpickerCustomScript" asp-src="~/OrchardCore.ContentFields/Scripts/iconpicker-custom.js" at="Foot"></script>
 
 <div class="@Orchard.GetFieldWrapperClasses(Model.PartFieldDefinition)" id="@Html.IdFor(x => x.Text)_FieldWrapper">
-    <label asp-for="Text" class="@Orchard.GetLabelClasses()">@Model.PartFieldDefinition.DisplayName()</label>
+    <label asp-for="Text" class="@Orchard.GetLabelClasses(inputRequired: settings.Required)">@Model.PartFieldDefinition.DisplayName()</label>
     <div class="@Orchard.GetEndClasses()">
         <input type="hidden" asp-for="Text" id="@Html.IdFor(m=>m.Text)" />
         <div class="btn-toolbar" role="toolbar" aria-label="Icon Selector Toolbar">
@@ -25,6 +25,7 @@
                 <div class="dropdown-menu"></div>
             </div>
         </div>
+        <span asp-validation-for="Text"></span>
 
         @if (!string.IsNullOrEmpty(settings.Hint))
         {