Geek asks and answers

How to get an invalid field identifier in a validation summary before validation messages

Is there a way to configure validationSummary so that it can display anchor tags that HREF is the name of the field that displays the validation message in the summary? That way, using jquery, I can add onclick events that focus the field when the anchor tag is clicked on the validation summary.

This is true for visually impaired people, so when they have errors, the focus summary summary focuses, they are inserted into the error record, the anchor tag with focus field label and the screen reader reads the anchor, then the message, then they can click on the anchor to focus on the wrong field.

<a href = "# First_Name"> Name </a> - Enter your name.

Thank.

+3
source share
1 answer

I do not think that there is any functionality within this function, so you will need to use your own extension method. For instance:

    public static string AccessibleValidationSummary(this HtmlHelper htmlHelper, string message, IDictionary<string, object> htmlAttributes)
    {
        // Nothing to do if there aren't any errors
        if (htmlHelper.ViewData.ModelState.IsValid)
        {
            return null;
        }

        string messageSpan;
        if (!String.IsNullOrEmpty(message))
        {
            TagBuilder spanTag = new TagBuilder("span");
            spanTag.MergeAttributes(htmlAttributes);
            spanTag.MergeAttribute("class", HtmlHelper.ValidationSummaryCssClassName);
            spanTag.SetInnerText(message);
            messageSpan = spanTag.ToString(TagRenderMode.Normal) + Environment.NewLine;
        }
        else
        {
            messageSpan = null;
        }

        StringBuilder htmlSummary = new StringBuilder();
        TagBuilder unorderedList = new TagBuilder("ul");
        unorderedList.MergeAttributes(htmlAttributes);
        unorderedList.MergeAttribute("class", HtmlHelper.ValidationSummaryCssClassName);

        foreach (string key in htmlHelper.ViewData.ModelState.Keys)
        {
            ModelState modelState = htmlHelper.ViewData.ModelState[key];
            foreach (ModelError modelError in modelState.Errors)
            {
                string errorText = htmlHelper.ValidationMessage(key);
                if (!String.IsNullOrEmpty(errorText))
                {
                    TagBuilder listItem = new TagBuilder("li");

                    TagBuilder aTag = new TagBuilder("a");
                    aTag.Attributes.Add("href", "#" + key);
                    aTag.InnerHtml = errorText;
                    listItem.InnerHtml = aTag.ToString(TagRenderMode.Normal);
                    htmlSummary.AppendLine(listItem.ToString(TagRenderMode.Normal));
                }
            }
        }

        unorderedList.InnerHtml = htmlSummary.ToString();

        return messageSpan + unorderedList.ToString(TagRenderMode.Normal);
    }

This uses the existing extension method from within the frame and changes the tag that is inserted into the list. This is a quick example, and before that you need to consider some things:

  • This does not encode an error message as I used an existing one html.ValidationMessage. If you need to encode a message, you will need to include such code to provide default messages and any localization requirements.
  • Due to the use of the existing ValidationMessage method, a span tag is present in the kernel. If you want to streamline your HTML, you need to replace it.
  • . , html.ValidationSummary(), .
+4

More articles:


All Articles