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.

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.

@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.

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 that pulls the messages from Umbraco.

Custom Validation Error Messages Using Umbraco PropertiesNow 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. Custom validation

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");
        }
Code now working
Summary.

Thank you for reading this blog, I hope you found it helpful.