Add registration workflow

Update unobtrusive Validation

WebCms/Views/Contact/Index.cshtml

@@ -4,13 +4,13 @@
 @{
     Html.RequiresJs("~/scripts/jquery.validate.min.js", 2);
     Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.min.js", 2);
-    Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.bootstrap.min.js", 2);
+    Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.bootstrap.js", 2);
     Html.RequiresJs("~/scripts/jquery.validate.custom.js", 2);
 }
 
-<div class="container top-buffer">
-    <div class="row">
-        <div class="col-md-6 col-md-push-2 well">
+<div class="container mt-4">
+    <div class="row justify-content-center">
+        <div class="col-md-6 ">
             @Html.Partial("_ValidationSummary")
 
             @using (Html.BeginUmbracoForm<ContactController>("Submit"))

WebCms/Views/LeafInput/Create.cshtml

@@ -7,7 +7,7 @@
     Html.RequiresJs("~/scripts/jquery.autocomplete.min.js", 2);
     Html.RequiresJs("~/scripts/jquery.validate.min.js", 2);
     Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.min.js", 2);
-    Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.bootstrap.min.js", 2);
+    Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.bootstrap.js", 2);
     Html.RequiresJs("~/scripts/jquery.validate.custom.js", 2);
     Html.RequiresJs("~/scripts/LeafInputCreate.js", 3);
 
@@ -83,10 +83,12 @@
                 @Html.EditorFor(m => m.TermsOfService)
                 <input type="submit" id="submit-form" class="d-none" />
             }
-            <div class="container"><div class="row">
-                <label for="submit-form" class="btn btn-primary col-6 offset-6 col-sm-5 offset-sm-7 col-md-4 offset-md-8">Submit...</label>
-            </div></div>
-            
+            <div class="container">
+                <div class="row">
+                    <label for="submit-form" class="btn btn-primary col-6 offset-6 col-sm-5 offset-sm-7 col-md-4 offset-md-8">Submit...</label>
+                </div>
+            </div>
+
         </div>
     </div>
 </div>

WebCms/Views/MacroPartials/Membership/Login.cshtml

@@ -7,28 +7,22 @@
     var loginModel = new LoginModel { RedirectUrl = "/leaf-data/manage-queue/" };
 }
 
-<div class="container mt-5">
-<div class="row justify-content-center">
-    <div class="col-lg-4 card card-body bg-light">
-        @using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin"))
-        {
-            <fieldset>
-                @Html.ValidationSummary("loginModel", true)
-                <div class="form-group">
-                    @Html.LabelFor(m => loginModel.Username)
-                    @Html.TextBoxFor(m => loginModel.Username, new {@class = "form-control" })
-                    @Html.ValidationMessageFor(m => loginModel.Username)
-                </div>
-                <div class="form-group">
-                    @Html.LabelFor(m => loginModel.Password)
-                    @Html.PasswordFor(m => loginModel.Password, new {@class = "form-control" })
-                    @Html.ValidationMessageFor(m => loginModel.Password)
-                </div>
+<div class="container mt-3">
+    <div class="row justify-content-center">
+        <div class="col-lg-4 card card-body bg-light">
+@using (Html.BeginUmbracoForm<UmbLoginController>("HandleLogin"))
+{
+        @Html.EditorFor(m => loginModel.Username)
+        @Html.EditorFor(m => loginModel.Password, "Password")
 
-                <button class="btn btn-primary pull-right">Login</button>
-                @Html.HiddenFor(m => loginModel.RedirectUrl)
-            </fieldset>
-        }
+        @Html.ValidationSummary("loginModel", true)
+        
+        <button class="btn btn-primary pull-right">Login</button>
+        @Html.HiddenFor(m => loginModel.RedirectUrl)
+}
+        </div>
+    </div>
+    <div class="row justify-content-center mt-lg-3">
+        <p>Don't have an account? <a href="/membership/register">Register here</a> </p>
     </div>
 </div>
-</div>

WebCms/Views/MacroPartials/Membership/Register.cshtml

@@ -12,25 +12,23 @@
     Html.EnableClientValidation();
     Html.RequiresJs("~/scripts/jquery.validate.min.js", 2);
     Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.min.js", 2);
+    Html.RequiresJs("~/scripts/jquery.validate.unobtrusive.bootstrap.js", 2);
 
     Html.RequiresJs("~/scripts/Register.js");
 
     var user = Membership.GetUser();
-    if (user != null)
-    {
-        TempData["StatusMessage"] = "You are already logged in, " + user.UserName;
-        TempData["StatusMessage-Type"] = "alert-danger";
-
-        // todo: redirect
-    }
 }
 
 <div class="container mt-5">
     <div class="row justify-content-center">
         <div class="col-lg-6 card card-body bg-light">
-@if (success)
+@if (success || (!user?.IsApproved ?? false))
 {
-    <p>Registration succeeded.</p>
+    <p><span class="fa fa-check text-primary"></span> Registration succeeded. Please check your email to verify your account.</p>
+}
+else if (user != null)
+{
+    <p>No need to register - you are already logged withe email @user.Email</p>
 }
 else
 {
@@ -39,30 +37,33 @@ else
             null,
             new {id="register-member"}))
     {
-        <div class="form-group">
-            @Html.ValidationSummary("registerModel", true)
+        @Html.ValidationSummary(true)
 
+        @Html.EditorFor(m => registerModel.Name)
+        @Html.EditorFor(m => registerModel.Email, new { type = "email"})
+        @Html.EditorFor(m => registerModel.Password, "Password")
+        @*<div class="form-group">
             @Html.LabelFor(m => registerModel.Name)
             @Html.TextBoxFor(m => registerModel.Name, new { @class = "form-control" })
-            @Html.ValidationMessageFor(m => registerModel.Name)
+            @Html.ValidationMessageFor(m => registerModel.Name, "", new { @class = "text-danger" })
         </div>
         <div class="form-group">
             @Html.LabelFor(m => registerModel.Email)
             @Html.TextBoxFor(m => registerModel.Email, new { @class = "form-control" })
-            @Html.ValidationMessageFor(m => registerModel.Email)
+            @Html.ValidationMessageFor(m => registerModel.Email, "", new { @class = "text-danger" })
         </div>
         <div class="form-group">
             @Html.LabelFor(m => registerModel.Password)
             @Html.PasswordFor(m => registerModel.Password, new { @class = "form-control" })
-            @Html.ValidationMessageFor(m => registerModel.Password)
-        </div>
-        <div class="form-group">
+            @Html.ValidationMessageFor(m => registerModel.Password, "", new { @class = "text-danger" })
+        </div>*@
+        <div class="form-group verifyPassword">
             @Html.Label("VerifyPassword")
             @Html.Password("VerifyPassword", null, new { @class = "form-control" })
-            @Html.ValidationMessage("VerifyPassword")
+            @Html.ValidationMessage("VerifyPassword", "", new { @class = "text-danger" })
         </div>
 
-        if (registerModel.MemberProperties != null)
+        @*if (registerModel.MemberProperties != null)
         {
             for (var i = 0; i < registerModel.MemberProperties.Count; i++)
             {
@@ -72,7 +73,7 @@ else
                     @Html.HiddenFor(m => registerModel.MemberProperties[i].Alias)
                 </div>
             }
-        }
+        }*@
 
         @Html.HiddenFor(m => registerModel.MemberTypeAlias)
         @Html.HiddenFor(m => registerModel.RedirectUrl)

WebCms/Views/Shared/EditorTemplates/Boolean.cshtml

@@ -1,7 +1,8 @@
-@using LeafWeb.WebCms.Utility
 @model Boolean?
 
 @{
+    Layout = "_FieldLayout.cshtml";
+
     var htmlAttributes = new RouteValueDictionary();
     if (ViewBag.@class != null)
     {
@@ -9,13 +10,7 @@
     }
 }
 
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m, new { @class = "" })
-    <div class="controls">
-        @Html.CheckBox(
-            "",
-            Model.HasValue && Model.Value,
-            htmlAttributes)
-        @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
-    </div>
-</div>
+@Html.CheckBox(
+    "",
+    Model.HasValue && Model.Value,
+    htmlAttributes)

WebCms/Views/Shared/EditorTemplates/DateTime.cshtml

@@ -1,7 +1,9 @@
-@using LeafWeb.WebCms.Utility
+@using System.Threading
 @model DateTime?
 
 @{
+    Layout = "_FieldLayout.cshtml";
+
     DateTime dt;
     if (Model.HasValue)
     {
@@ -13,8 +15,14 @@
     }
 }
 
-<div class="form-group@(Html.ValidationErrorFor(m => m, " error has-error"))">
-    @Html.LabelFor(m => m)
-    @Html.TextBoxFor(m => m, new { @class="form-control datepicker", data_provide="datepicker", data_date_language="globalize", data_date=dt, data_date_format=System.Threading.Thread.CurrentThread.CurrentUICulture.DateTimeFormat.ShortDatePattern.Replace("M", "m"), data_date_today_highlight="true", data_date_today_btn="false" })
-    @Html.ValidationMessageFor(m => m, null, new { @class="form-text" })
-</div>
+@Html.TextBoxFor(m => m, 
+    new
+    {
+        @class="form-control datepicker", 
+        data_provide="datepicker", 
+        data_date_language="globalize", 
+        data_date=dt, 
+        data_date_format=Thread.CurrentThread.CurrentUICulture.DateTimeFormat.ShortDatePattern.Replace("M", "m"), 
+        data_date_today_highlight="true", 
+        data_date_today_btn="false"
+    })

WebCms/Views/Shared/EditorTemplates/Decimal.cshtml

@@ -1,13 +1,14 @@
-@using LeafWeb.WebCms.Utility
+@using System.Globalization
 @model decimal?
-
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="input-group">
-        <span class="input-group-addon">&euro;@Html.TextBox(
-        "",
-        Model == null ? "" : String.Format(System.Globalization.CultureInfo.CurrentCulture, "{0:F2}", ViewData.ModelMetadata.Model),
-        ViewBag.ClearTextField == true ? new { @class = "form-control clear-text-field input-block-level" } : new { @class = "form-control input-block-level" })</span>
-    </div>
-    @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
+@{
+    Layout = "_FieldLayout.cshtml";
+}
+<div class="input-group">
+    <span class="input-group-append">
+        &euro;@Html.TextBox(
+                  "",
+                  Model == null 
+                      ? "" 
+                      : string.Format(CultureInfo.CurrentCulture, "{0:F2}", ViewData.ModelMetadata.Model))
+    </span>
 </div>

WebCms/Views/Shared/EditorTemplates/EmailAddress.cshtml

@@ -1,29 +1,30 @@
+@using LeafWeb.WebCms.Utility
 @model object
 @{
-    Layout = "~/Views/Shared/EditorTemplates/_FieldLayout.cshtml";
+    Layout = "_FieldLayout.cshtml";
 }
 @{
     var htmlAttributes = new RouteValueDictionary();
+
+    htmlAttributes.Add("type", "email");
+
+    var controlClass = "form-control";
+
     if (ViewBag.@class != null)
     {
-        htmlAttributes.Add("class", "form-control " + ViewBag.@class);
-    }
-    else
-    {
-        htmlAttributes.Add("class", "form-control");
-    }
-    if (ViewBag.@type != null)
-    {
-        htmlAttributes.Add("type", ViewBag.@type);
-    }
-    else
-    {
-        htmlAttributes.Add("type", "email");
+        controlClass = string.Concat(controlClass, " ", ViewBag.@class);
     }
+
     if (ViewBag.placeholder != null)
     {
         htmlAttributes.Add("placeholder", ViewBag.placeholder);
     }
+
+    if (Html.HasError())
+    {
+        controlClass = string.Concat(controlClass, " ", "is-invalid");
+    }
+    htmlAttributes.Add("class", controlClass);
 }
 
 @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)

WebCms/Views/Shared/EditorTemplates/Enum.cshtml

@@ -1,9 +1,6 @@
-@using LeafWeb.WebCms.Utility
 @model object
+@{
+    Layout = "_FieldLayout.cshtml";
+}
 
-
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    @Html.EnumDropDownListFor(m => m, new { @class = "form-control" })
-    @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
-</div>
+@Html.EnumDropDownListFor(m => m, new { @class = "form-control" })

WebCms/Views/Shared/EditorTemplates/HttpPostedFileBase.cshtml

@@ -1,6 +1,6 @@
 @model HttpPostedFileBase
 @{
-    Layout = "~/Views/Shared/EditorTemplates/_FieldLayout.cshtml";
+    Layout = "_FieldLayout.cshtml";
 }
 
 <span class="btn btn-outline-secondary btn-file">

WebCms/Views/Shared/EditorTemplates/Int32.cshtml

@@ -1,7 +1,8 @@
-@using LeafWeb.WebCms.Utility
 @model int?
 
 @{
+    Layout = "_FieldLayout.cshtml";
+
     var htmlAttributes = new RouteValueDictionary();
     if (ViewBag.@class != null)
     {
@@ -18,13 +19,4 @@
     }
 }
 
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="controls">
-        @Html.TextBox(
-            "",
-            ViewData.TemplateInfo.FormattedModelValue,
-            htmlAttributes)
-        @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
-    </div>
-</div>
+@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)

WebCms/Views/Shared/EditorTemplates/Markdown.cshtml

@@ -6,7 +6,7 @@
 }
 
 <link rel="stylesheet" type="text/css" href="/Scripts/mdd_styles.css" />
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
+<div class="form-group@(Html.ValidationErrorFor(m => m, " is-invalid"))">
     @Html.LabelFor(m => m)
     <div class="mdd_toolbar"></div>
     @Html.TextAreaFor(

WebCms/Views/Shared/EditorTemplates/Multiline.cshtml

@@ -1,13 +1,8 @@
-@using LeafWeb.WebCms.Utility
 @model object
+@{
+    Layout = "_FieldLayout.cshtml";
+}
 
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="controls">
-        @Html.TextAreaFor(
-            m => m,
-            8, 8,
-            ViewBag.ClearTextField == true ? new { @class = "form-control input-block-level clear-text-field" } : new { @class = "form-control input-block-level" } )
-        @Html.ValidationMessageFor(m => m, null,  new { @class = "form-text" })
-    </div>
+<div class="">
+    @Html.TextAreaFor(m => m, new{rows=8, @class="form-control"})
 </div>

WebCms/Views/Shared/EditorTemplates/Password.cshtml

@@ -1,26 +1,5 @@
-@using LeafWeb.WebCms.Utility
 @model object
-
 @{
-    var htmlAttributes = new RouteValueDictionary();
-    if (ViewBag.@class != null)
-    {
-        htmlAttributes.Add("class", "form-control " + ViewBag.@class);
-    }
-    else
-    {
-        htmlAttributes.Add("class", "form-control");
-    }
+    Layout = "_FieldLayout.cshtml";
 }
-
-
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="controls">
-        @Html.Password(
-            "",
-            ViewData.TemplateInfo.FormattedModelValue,
-            htmlAttributes)
-        @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
-    </div>
-</div>
+@Html.Password("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "form-control" })

WebCms/Views/Shared/EditorTemplates/SelectListViewModel.cshtml

@@ -1,17 +1,20 @@
 @model SelectListViewModel
 @{
-    Layout = "~/Views/Shared/EditorTemplates/_FieldLayout.cshtml";
+    Layout = "_FieldLayout.cshtml";
 }
 @{
     var prefix = ViewData.TemplateInfo.HtmlFieldPrefix;
     ViewData.TemplateInfo.HtmlFieldPrefix = string.Empty;
 
     var required = new { required = "true" };
+
     foreach (var li in Model.ListItems)
     {
-        <div class="radio">
-            <label class="radio">
-                @Html.RadioButton(prefix + ".Selected", li.Value, li.Selected, required) @li.Text
+        var name = prefix + ".Selected";
+        <div class="form-check">
+            <input class="form-check-input" type="radio" name="@name" id="@li.Value" value="@li.Value" @(li.Selected ? " checked" : "")>
+            <label class="form-check-label" for="@li.Value">
+                @li.Text
             </label>
         </div>
         required = null;

WebCms/Views/Shared/EditorTemplates/Single.cshtml

@@ -1,17 +1,10 @@
-@using LeafWeb.WebCms.Utility
 @model float?
 
 @{
-    float f;
-    f = !Model.HasValue ? 0.0f : Model.Value;
+    Layout = "_FieldLayout.cshtml";
+
+    var f = Model ?? 0.0f;
 }
 
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="input-group">
-        @Html.TextBox(
-        "", f,
-        ViewBag.ClearTextField == true ? new { @class = "form-control clear-text-field input-block-level" } : new { @class = "form-control input-block-level" })<span class="input-group-addon">0,00</span>
-    </div>
-    @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
-</div>
+@Html.TextBox("", f)
+<span class="input-group-append">0,00</span>

WebCms/Views/Shared/EditorTemplates/String.cshtml

@@ -1,25 +1,33 @@
 @model object
 @{
-    Layout = "~/Views/Shared/EditorTemplates/_FieldLayout.cshtml";
+    Layout = "_FieldLayout.cshtml";
 }
 @{
     var htmlAttributes = new RouteValueDictionary();
+
+    if (ViewData.ContainsKey("type"))
+    {
+        htmlAttributes.Add("type", ViewData["type"]);
+    }
+
+    var controlClass = "form-control";
+
     if (ViewBag.@class != null)
     {
-        htmlAttributes.Add("class", "form-control " + ViewBag.@class);
-    }
-    else
-    {
-        htmlAttributes.Add("class", "form-control");
-    }
-    if (ViewBag.@type != null)
-    {
-        htmlAttributes.Add("type", ViewBag.@type);
+        controlClass = string.Concat(controlClass, " ", ViewBag.@class);
     }
+
     if (ViewBag.placeholder != null)
     {
         htmlAttributes.Add("placeholder", ViewBag.placeholder);
     }
+
+    if (ViewData.ModelState.ContainsKey(ViewData.TemplateInfo.HtmlFieldPrefix) &&
+        ViewData.ModelState[ViewData.TemplateInfo.HtmlFieldPrefix].Errors.Any())
+    {
+        controlClass = string.Concat(controlClass, " ", "is-invalid");
+    }
+    htmlAttributes.Add("class", controlClass);
 }
 
 @Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)

WebCms/Views/Shared/EditorTemplates/TermsOfService.cshtml

@@ -6,14 +6,14 @@
     //var isChecked = Model.HasValue && Model.Value;
 }
 
-<div class="@(Html.ValidationErrorFor(m => m, " has-error"))">
+<div class="@(Html.ValidationErrorFor(m => m, " is-invalid"))">
     <div class="checkbox">
         <label>
             @Html.CheckBoxFor(m=> m)
             I agree to the
             <a href="@UmbracoContext.Current.UrlProvider.GetUrl(1115)" target="_blank">
                 Terms of Service
-                <span class="fa fa-new-window" aria-hidden="true"></span>
+                <span class="fa fa-window-restore" aria-hidden="true"></span>
             </a>
         </label>
     </div>

WebCms/Views/Shared/EditorTemplates/Text.cshtml

@@ -1,13 +1,6 @@
-@using LeafWeb.WebCms.Utility
 @model object
+@{
+    Layout = "_FieldLayout.cshtml";
+}
 
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="controls">
-        @Html.TextBox(
-            "",
-            ViewData.TemplateInfo.FormattedModelValue,
-            ViewBag.ClearTextField == true ? new { @class = "form-control clear-text-field input-block-level" } : new { @class = "form-control input-block-level" } )
-        @Html.ValidationMessageFor(m => m, null, new { @class = "form-text" })
-    </div>
-</div>
+@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue)

WebCms/Views/Shared/EditorTemplates/TimeSpan.cshtml

@@ -1,23 +1,22 @@
-@using LeafWeb.WebCms.Utility
 @model TimeSpan?
 
 @{
-    TimeSpan ts;
-    
-    if (Model == null)
-    {
-        ts = TimeSpan.FromMinutes(10);
-    }
-    else
-    {
-        ts = Model.Value;
-    }
-     
+    Layout = "_FieldLayout.cshtml";
+
+    var ts = Model ?? TimeSpan.FromMinutes(10);
 }
-<div class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))">
-    @Html.LabelFor(m => m)
-    <div class="controls">
-        @Html.TextBoxFor(m => m, "hh\\:mm", new { @Value = ts.ToString("hh\\:mm"), @class="form-control timepicker", data_provide="timepicker", data_minute_step="5", data_show_meridian="false", data_disable_focus="true", data_template = "dropdown", data_default_time="value"  })
-        @Html.ValidationMessageFor(m => m, null, new { @class="form-text" })
-    </div>
-</div>
+
+@Html.TextBoxFor(m => m, 
+    "hh\\:mm", 
+    new
+    {
+        @Value = ts.ToString("hh\\:mm"),
+        @class="form-control timepicker", 
+        data_provide="timepicker", 
+        data_minute_step="5", 
+        data_show_meridian="false",
+        data_disable_focus="true", 
+        data_template = "dropdown", 
+        data_default_time="value"
+    })
+

WebCms/Views/Shared/EditorTemplates/_FieldLayout.cshtml

@@ -1,18 +1,11 @@
-@model object
+@using StringExtensions = LeafWeb.Core.Utility.StringExtensions
+@model object
 @{
     Layout = null;
-    var propertyName = ViewData.ModelMetadata.PropertyName;
-    var lowerPropertyName = @LeafWeb.Core.Utility.StringExtensions.LowercaseFirst(propertyName);
-    var values = ViewData.ModelMetadata.AdditionalValues;
-    var units = values.ContainsKey("Units") ? (string)values["Units"] : null;
-    var currency = values.ContainsKey("Currency") ? (string)values["Currency"] : null;
-    var formatHint = values.ContainsKey("FormatHint") ? (string)values["FormatHint"] : null;
-    var editLabel = values.ContainsKey("EditLabel") ? (bool)values["EditLabel"] : true;
-    var hasError = ViewData.ModelState[propertyName] != null && ViewData.ModelState[propertyName].Errors.Any();
-    var hasErrorClass = hasError ? "has-error" : string.Empty;
+    var lowerPropertyName = StringExtensions.LowercaseFirst(ViewData.ModelMetadata.PropertyName);
 }
-<div class="form-group @lowerPropertyName @hasErrorClass">
+<div class="form-group @lowerPropertyName">
     @Html.LabelForModel()
     @RenderBody()
-    @Html.ValidationMessage("", new { @class = "form-text"})
+    @Html.ValidationMessage(string.Empty, new { @class = "text-danger"})
 </div>

WebCms/Views/Shared/_ValidationField.cshtml

@@ -2,12 +2,11 @@
 @{
     var fieldName = Model;
 }
-@if (ViewData.ModelState[fieldName] != null && ViewData.ModelState[fieldName].Errors.Any())
+@if (ViewData.ModelState[fieldName] != null 
+     && ViewData.ModelState[fieldName].Errors.Any())
 {
-    <span class="form-text field-validation-error">
-        @foreach (var error in ViewData.ModelState[fieldName].Errors)
+        foreach (var error in ViewData.ModelState[fieldName].Errors)
         {
-            <span id="@fieldName-error" class="text-danger">@error.ErrorMessage</span>
+            <div id="@fieldName-error" class="is-invalid invalid-feedback">@error.ErrorMessage</div>
         }
-    </span>
 }