I have four dropdown lists in my .net 5 core mvc view. One is populated from a list contained in the model passed to the view at runtime, the other three are populated through Json calls. All four of these DDLs are required on my form, but Jquery Validate is only catching two of them, and I cannot figure out why.

The basic code of the four DDLs is as follows. First, the two that fail validation as expected:

@* This DDL is populated from a list in the model *@    

<select id="mGroup" required>
    <option selected="selected" value="">Select Material Group</option>
        @foreach (var item in Model.groups)
        {
            <option value="@item.group" style="background-color: @item.hex_color;">
                @item.name
            </option>
        }
</select>

@* This DDL is populated from a Json call, triggered when a value is selected in the first DDL *@

<select id="mSubGroup" tabindex="7" required>
    <option value="">Select Material Group</option>
</select>

When I try to submit my form without selecting valid options in these DDLs, validation triggers and they’re assigned the class ‘input-validation-error’, which is what I want.

The two DDLs below, however, both of which are populated by Json calls, do not see this happen.

<select id="class" required>
    <option value="" selected="selected">Select Class</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

<select id="limit" required>
    <option value="" selected="selected">Select Limit</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
</select>

When I try to submit my form without selecting options on these DDLs, nothing happens. Their HTML remains unchanged. Even if I try selecting valid options in the first two DDLs I mentioned, these still do not get validated.

The form that contains these DDLs (and all my other inputs) is setup in code like so:

@using (Html.BeginForm(FormMethod.Post, new {id = "qForm"}))

… because the form contains multiple “submit” buttons that each trigger different form actions. In my javascript for these buttons’ click events, I call

$('#rfqForm').validate();

per the Jquery Validate documentation.

My form is also subject to MVC server-side validation in the model. These four dropdowns each feed their selected values into “Html.HiddenFor” objects connected to the postback model, which I know are not included in DOM validation. However, when I replace these hidden fields with something that is, such as a text box hidden with CSS, validation still does not trigger. This is why I’m trying to go the Jquery route.

I need to get these dropdowns validating. I hope someone can explain what’s going wrong here.