Forms not showing required field asterisk *

Jacob Mallach asked on February 2, 2021 21:20

Hello,

Our webpages that use forms are not showing the required field asterisk. In the form builder, we check the required field box, but it does not visibly show on the webpage when the page is published. Only when a user submits the incomplete form, do the required fields show an error message for the required field to be completed.

How can we get the required field indicators to show on the webpage?

Thanks for the help.

form

Recent Answers

Brenden Kehren answered on February 2, 2021 21:46

What version of Xperience are you using? The simple fix is to set the display label to have the asterisk in it. You can even put HTML in that label like so:

First Name <span class="required"></span>:

If you're using version 12 or 13 and MVC you can create a custom class do inject some css into the form components like so:

using System;
using Kentico.Forms.Web.Mvc;

namespace Client.Lib.Events
{
    public class FormFieldMarkupInjection
    {   
        public static void RegisterEventHandlers()
        {
            // Contextually customizes the markup of rendered form fields
            FormFieldRenderingConfiguration.GetConfiguration.Execute += InjectMarkupIntoKenticoComponents;
        }
        private static void InjectMarkupIntoKenticoComponents(object sender, GetFormFieldRenderingConfigurationEventArgs e)
        {
            // Only injects additional markup into default Kentico form components
            if (!e.FormComponent.Definition.Identifier.StartsWith("Kentico", StringComparison.InvariantCultureIgnoreCase))
            {
                return;
            }

            // Adds WAI-ARIA and HTML5 accessibility attributes to form fields marked as 'Required' via the Form builder interface
            AddAccessibilityAttributes(e);

        }


        private static void AddAccessibilityAttributes(GetFormFieldRenderingConfigurationEventArgs e)
        {
            if (e.FormComponent.BaseProperties.Required)
            {
                // Adds the 'aria-required' and 'required' attributes to the component's 'input' element
                e.Configuration.EditorHtmlAttributes["aria-required"] = "true";
                e.Configuration.EditorHtmlAttributes["required"] = "";
                // Appends an asterisk to the component's 'Label' element. Since the class attribute is fairly
                // common, checks if the key is already present and inserts or appends the key accordingly.
                if (e.Configuration.LabelHtmlAttributes.ContainsKey("class"))
                {
                    e.Configuration.LabelHtmlAttributes["class"] += " required-field-red-star";
                }
                else
                {
                    e.Configuration.LabelHtmlAttributes["class"] = "required-field-red-star";
                }
            }
        }
    }
}

Then in your Global.ascx.cs Application_Start() event add these two calls:

Lib.Helpers.FormBuilderCustomizations.SetGlobalRenderingConfigurations();

// register the form customizations
FormFieldMarkupInjection.RegisterEventHandlers();

This will then render all the "required" labels with the css class of "required-field-red-star". It also adds the accessibility attributes to the input control as well.

0 votesVote for this answer Mark as a Correct answer

Chet Tom answered on August 5, 2021 22:45 (last edited on August 5, 2021 23:16)

@BrendenKehren

In my CustomFormField.cs custom web control how do I add "aria-required" to the input that is generated when I call this.LoadFormControl((Control)this);

I'm trying to accomplish this on Kentico 11

0 votesVote for this answer Mark as a Correct answer