question

RobertCoscia-2878 avatar image
0 Votes"
RobertCoscia-2878 asked RobertCoscia-2878 commented

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

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>



dotnet-aspnet-mvc
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

ChaoDeng-MSFT avatar image
0 Votes"
ChaoDeng-MSFT answered RobertCoscia-2878 commented

Hi @RobertCoscia-2878,
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



· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you ChaoDeng

0 Votes 0 ·