使用 select2 时保留输入验证 CSS 类

Question

在我的表单上，我有一个下拉列表，我在其中使用Select2。

这是我的剃须刀：

<div class="form-group">
    @Html.LabelFor(model => model.StateId, htmlAttributes: new { @class = "control-label col-md-4" })
    <div class="col-md-8">
        @Html.DropDownListFor(model => model.StateId, ViewBag.StateName as SelectList, "-- Select State --", new { id = "CreateState", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.StateId, "", new { @class = "text-danger" })
    </div>
</div>

我正在使用 jQuery Validation 进行客户端验证。

如果我离开下拉列表而没有选择值，那么我会收到一个验证错误，我正在收到该错误，但不是相应的 css 类，该类以红色勾勒出该框的轮廓input-validation-error。

这是我得到的：

正如您所看到的，City获得了红色轮廓，而使用 Select2 的 State 则没有，即使两者都获得了验证消息。

当我检查 Razor 代码中渲染的 HTML 时，我在下拉列表中看到以下内容：

<select name="StateId" tabindex="-1" class="form-control select2-hidden-accessible input-validation-error" id="CreateState" aria-hidden="true" data-val-required="The State field is required." data-val-number="The field State must be a number." data-val="true">
<option value="">-- Select State --</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Illinois</option>
<option value="14">Indiana</option>
<option value="15">Iowa</option>
<option value="16">Kansas</option>
<option value="17">Kentucky</option>
<option value="18">Louisiana</option>
<option value="19">Maine</option>
<option value="20">Maryland</option>
<option value="21">Massachusetts</option>
<option value="22">Michigan</option>
<option value="23">Minnesota</option>
<option value="24">Mississippi</option>
<option value="25">Missouri</option>
<option value="26">Montana</option>
<option value="27">Nebraska</option>
<option value="28">Nevada</option>
<option value="29">New Hampshire</option>
<option value="30">New Jersey</option>
<option value="31">New Mexico</option>
<option value="32">New York</option>
<option value="33">North Carolina</option>
<option value="34">North Dakota</option>
<option value="35">Ohio</option>
<option value="36">Oklahoma</option>
<option value="37">Oregon</option>
<option value="38">Pennsylvania</option>
<option value="39">Rhode Island</option>
<option value="40">South Carolina</option>
<option value="41">South Dakota</option>
<option value="42">Tennessee</option>
<option value="43">Texas</option>
<option value="44">Utah</option>
<option value="45">Vermont</option>
<option value="46">Virginia</option>
<option value="47">Washington</option>
<option value="48">West Virginia</option>
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
</select>

现在已经上课了input-validation-error，但显然没有显示红色轮廓。

生成select2这个：

<span class="select2 select2-container select2-container--bootstrap" style="width: 280px;" dir="ltr">
    <span class="selection">
        <span tabindex="0" class="select2-selection select2-selection--single" role="combobox" aria-expanded="false" aria-haspopup="true" aria-labelledby="select2-CreateState-container">
            <span title="-- Select State --" class="select2-selection__rendered" id="select2-CreateState-container">-- Select State --</span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b>
            </span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

更新

使用 zgood 的答案是结果：

更新2

改变 zgood 的答案我可以使用这个：

.input-validation-error ~ .select2[![enter image description here][3]][3] {
    border: 1px solid red;
}

结果是这样的：

但现在红色轮廓与文本框的形式不匹配。

Answer 1

我认为这种风格可能对你有帮助：

.input-validation-error ~ .select2 .select2-selection__rendered {
  border: 1px solid red;
}

当它的前一个同级（原始select）在验证期间获取类时，这将选择 select2 下拉列表的渲染区域input-validation-error。

它们的关键是前面的元素选择器 ~

看到这个小提琴

更新

实际上，以 为目标可能比.select2-selection以 为目标更好.select2-selection__rendered。尝试将样式更新为：

.input-validation-error ~ .select2 .select2-selection {
  border: 1px solid red;
}