Custom Validation Error Messages Using Umbraco Properties

Built using Umbraco 7

Sometimes we need to display error messages to the user from Umbraco, but what happens if we cannot use the dictionary. Well in this post, I will show you how to do just that by using Umbraco properties.

First, we need to create a new doctype in Umbraco then a new tab. Within the tab, add the properties we want to display.

In the website project, create a new View Model for the form validation an example is shown below.

Data Annotations

Code for the view model

public class ContactViewModel
    {
        [UmbracoGetPropertyValueDisplayName("labelFirstName")]
        [UmbracoGetPropertyValueRequired("firstNameRequired")]
        [UmbracoGetPropertyValueRegularExpression("First Name", "errorOnlyAlphaNumericCharactersAllowed", "^[0-9a-zA-Z .]+$")]
        [UmbracoGetPropertyValueStringLength("First Name", "errorMessageStringLength", 5, MinimumLength = 1)]
        public string FirstName { get; set; }
        [UmbracoGetPropertyValueDisplayName("labelLastName")]
        [UmbracoGetPropertyValueRequired("lastNameRequired")]
        [UmbracoGetPropertyValueRegularExpression("Last Name", "errorOnlyAlphaNumericCharactersAllowed", "^[0-9a-zA-Z .]+$")]
        [UmbracoGetPropertyValueStringLength("Last Name", "errorMessageStringLength", 30, MinimumLength = 1)]
        public string LastName { get; set; }
        public string FirstNamePlaceholder { get; set; }
        public string LastNamePlaceholder { get; set; }
    }
Html View

Code for the view

@inherits UmbracoViewPage<Web.Core.ViewModels.ContactViewModel>
<h1>@TempData["Message"]</h1> 
@using (Html.BeginUmbracoForm("ContactForm", "ContactFormSurface", null, new {id = "frmContact", name = "frmContact", novalidate = "novalidate"}))
{
    @Html.ValidationSummary(false, "", new { @class = "text-danger" })
    @Html.AntiForgeryToken()
   
    <div class="form-group has-feedback">
        @Html.LabelFor(x => x.FirstName, new { @class = "control-label  sr-only" })
        @Html.TextBoxFor(x => x.FirstName, new { @class = "form-control", PlaceHolder = @Model.FirstNamePlaceholder })
    </div>
    <div class="form-group has-feedback">
        @Html.LabelFor(x => x.LastName, new { @class = "control-label sr-only" })
        @Html.TextBoxFor(x => x.LastName, new { @class = "form-control", PlaceHolder = @Model.LastNamePlaceholder })
    </div>
    <button type="Submit" id="btnContact">Send Message</button>
}
Controller

Code for the controller

using System.Web.Mvc;
using Umbraco.Web.Mvc;
using Web.Core.ViewModels;
namespace Web.Core.Controllers
{
    public class ContactFormSurfaceController : SurfaceController
    {
        [ChildActionOnly]
        public ActionResult DisplayForm()
        {
            string firstNamePlaceholder = PlaceholderFormText.GetPropertyValueItem("firstNamePlaceholder");
            string lastNamePlaceholder  = PlaceholderFormText.GetPropertyValueItem("lastNamePlaceholder");
            var model = new ContactViewModel
            {
                FirstNamePlaceholder    = firstNamePlaceholder,
                LastNamePlaceholder     = lastNamePlaceholder
            };
            return PartialView("~/Views/Partials/pvContactForm.cshtml", model);
        }
        [HttpPost, ValidateInput(true)]
        [ValidateAntiForgeryToken]
        public ActionResult ContactForm(ContactViewModel model)
        {
            if (!ModelState.IsValid)
            { 
                return CurrentUmbracoPage();
            }
            TempData["Message"] = "Done";
            return RedirectToCurrentUmbracoPage();
        }
    }
}

After everything is set up we can run the project and enter some dummy test data and submit the form.

As you can see, we now have working validation which pulls the messages from Umbraco.

Now if we disable JavaScript we can still return the error message from Umbraco,BUT WAIT, if you look at the error message, you can see it's displaying our placeholder that we entered in the text field in Umbraco.

This only happens when we have our placeholders, to get around this problem we need to add the following code.

Javascript Disabled

Now test the page again and we get the correct message displayed.

protected override ValidationResult IsValid(object value, ValidationContext validationContext)
        {
            //Needed if javascript disabled
            ErrorMessage = UmbracoPropertyValidationHelper.GetPropertyValueItem(_errorMessageKey);
            var removeRegex = ExtractStringBetweenTags.ExtractString(Pattern);
            
            var error           = FormatErrorMessage(validationContext.DisplayName);
            string errorMessage = StringBuilderMessage.Message(error, removeRegex);
            if (IsValid(value))
            {
                return ValidationResult.Success;
            }
            return new ValidationResult(_errorFieldName + " " + errorMessage + " " + "Javascript disabled");
        }

Blog Form

 Please complete the required fields (*required)

 *
*