Invalid & validation attributes for string applied to <select> causing client side validation issues

[andrerom]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

data-* attributes, and even invalid type="text", value, maxlength are wrongly applied to razor form element when a <select> is used.

Given following string property:

[Display(Name = Fields.Country)]
[StringLength(2, ErrorMessage = Messages.StringLength, MinimumLength = 2)]
[Required(ErrorMessage = Messages.RequiredField)]
public string CountryCode { get; set; } = "NO";// Alpha-2 code: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes

With the following razor (.cshtml) code, notice no use of asp-items= here, also notice <option> inner html is not valid, however value is:

<select class="form-select" asp-for="Address.CountryCode">
    <option value="NO" selected>🇳🇴</option>
    <option value="SE">🇸🇪</option>
    <option value="DK">🇩🇰</option>
    <option value="DE">🇩🇪</option>
    <option value="NL">🇳🇱</option>
    <option value="BE">🇧🇪</option>
</select>

Generated, with invalid (value, maxlength, type) and questionable (data-*) attributes:

<select class="form-select" data-val="true" data-val-length="Country must have at least 2 or maximum 2 letters." data-val-length-max="2" data-val-length-min="2" data-val-required="&#x27;Country&#x27; is required." id="Address_CountryCode" name="Address.CountryCode" required type="text" maxlength="2" value="">
    <option value="NO" selected>🇳🇴</option>
    <option value="SE">🇸🇪</option>
    <option value="DK">🇩🇰</option>
    <option value="DE">🇩🇪</option>
    <option value="NL">🇳🇱</option>
    <option value="BE">🇧🇪</option>
</select>

---

It works if you specify values via asp-items, but for the wrong reasons:

@{
    List<SelectListItem> Countries = new List<SelectListItem>
    {
        new SelectListItem { Value = "NO", Text = "🇳🇴", Selected = true },
        new SelectListItem { Value = "SE", Text = "🇸🇪" },
        new SelectListItem { Value = "DK", Text = "🇩🇰" },
        new SelectListItem { Value = "DE", Text = "🇩🇪" },
        new SelectListItem { Value = "NL", Text = "🇳🇱" },
        new SelectListItem { Value = "BE", Text = "🇧🇪" },
        // (FI, FR, AT, CH, PL ...)
    };
}
<select class="form-select" asp-for="Address.CountryCode" asp-items="Countries"></select>

Generated, in this case emoji is encoded, so innerhtml now has 2 character entities, making it validate (for the wrong reasons):

<select class="form-select"  data-val="true" data-val-length="Country must have at least 2 or maximum 2 letters." data-val-length-max="2" data-val-length-min="2" data-val-required="&#x27;Country&#x27; is required." id="Address_CountryCode" name="Address.CountryCode" required type="text" maxlength="2" value="">
    <option selected="selected" value="NO">&#x1F1F3;&#x1F1F4;</option>
    <option value="SE">&#x1F1F8;&#x1F1EA;</option>
    <option value="DK">&#x1F1E9;&#x1F1F0;</option>
    <option value="DE">&#x1F1E9;&#x1F1EA;</option>
    <option value="NL">&#x1F1F3;&#x1F1F1;</option>
    <option value="BE">&#x1F1E7;&#x1F1EA;</option>
</select>

---

Result of the original case is that this is marked as invalid, and form is impossible to send.

Workaround:

• Add data-val="false" to select, so jquery-validation-unobtrusive opts out of validating the element.
• Or specify asp-items and hope all innerhtml values encodes to 2 character entities.

Side: Validation without jQuery soon?

Expected Behavior

1. Not generate invalid attributes on select, possible tricking up jquery-validation/jquery-validation-unobtrusive
2. Perhaps jquery-validation-unobtrusive issue: Correctly handle data-val-lenght* properties on select element, it should validate value and not innerhtml.

Steps To Reproduce

See above.

Exceptions (if any)

No response

.NET Version

9.0.300

Anything else?

jquery 3.7.1
jquery-validation-1.21.0
jquery-validation-unobtrusive-3.2.11