Invalid form inputs are missing aria-describedby connections to their error text

Robert Coscia 21 Reputation points
2021-04-19T20:49:41.753+00:00

I have the following source in an mvc .cshtml page.

                @Html.LabelFor(m => m.CollegeListQuestionnaireFamilys[index].FirstName, "First Name")
                @Html.TextBoxFor(m => m.CollegeListQuestionnaireFamilys[index].FirstName, new { maxlength = 50, aria_required = "true" })
                @Html.ValidationMessageFor(m => m.CollegeListQuestionnaireFamilys[index].FirstName)

When an invalid entry is made the page renders the following:

<label for="CollegeListQuestionnaireFamilys_0__FirstName">First Name*</label>
<input aria-required="true" class="input-validation-error" data-val="true" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val-length-max="50" id="CollegeListQuestionnaireFamilys_0__FirstName" maxlength="50" name="CollegeListQuestionnaireFamilys[0].FirstName" type="text" value="" aria-invalid="true">
<span class="field-validation-error" data-valmsg-for="CollegeListQuestionnaireFamilys[0].FirstName" data-valmsg-replace="true">Family Tab: Parent/Guardian First Name is required.</span>

How do I get ValidationMessageFor() to include an AriaDescribeBy connection to the error text?

For Example:

<label for="City">City/Town*</label>
<input aria-required="true" class="input-validation-error" data-val="true" data-val-length="The field City must be a string with a maximum length of 50." data-val-length-max="50" id="City" maxlength="50" name="City" type="text" value="" aria-invalid="true" aria-describedby="CityError">
<span class="field-validation-error" data-valmsg-for="City" data-valmsg-replace="true" id="CityError">Basics Tab: City/Town is required.</span>

ASP.NET MVC
ASP.NET MVC
A Microsoft web application framework that implements the model-view-controller (MVC) design pattern.
591 questions
No comments
{count} votes

Accepted answer
  1. Chao Deng-MSFT 791 Reputation points
    2021-04-20T03:26:45.367+00:00

    Hi @Robert Coscia ,
    According to your needs, I made a demo, you can refer to it..
    view code:

    @model WebApplication1.Models.City  
      
    @{  
        ViewBag.Title = "Test";  
    }  
      
    <h2>Test</h2>  
    @Html.LabelFor(m => m.CollegeListQuestionnaireFamilys, "First Name")  
    @Html.TextBoxFor(m => m.CollegeListQuestionnaireFamilys, new {@class="form-control",aria_describedby="CityError", maxlength = 50, aria_required = "true"})<br />  
    @Html.ValidationMessageFor(m => m.CollegeListQuestionnaireFamilys, "The StudentName field is required", new { @class = "text-danger",id= "CityError" })  
    

    Result:
    pyveC.png
    BeCR2.png


    If the answer is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best Regards,

    ChaoDeng


0 additional answers

Sort by: Most helpful