使用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;
}

这将选择select2下拉列表的渲染区域，当其上一个兄弟（原始select）在验证期间获得类input-validation-error时。

他们的关键是preceding element selector ~

请参阅此fiddle

<强>更新

实际上，最好定位.select2-selection而不是.select2-selection__rendered。尝试将样式更新为：

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